components
Use when designing, implementing, or reviewing React/TypeScript components with naming conventions, props typing, hooks usage, and UnoCSS styling standards.
Skill by JsonLee12138
Install
Works with Claude Code, Claude apps, Codex, Cursor, Gemini CLI, GitHub Copilot, VS Code, OpenCode, Goose, Windsurf. Read the repository before you give any tool access to your data.
npx agentmarket install skill/jsonlee12138-components
Asks which of your tools to add it to (Claude Code, Codex, Cursor, VS Code, Windsurf, Gemini CLI, Claude Desktop) and shows the change first. See https://agentmart.dev/cli.
Get the weekly diff
The weekly diff: one email a week with new agent tools, notable updates and grade changes, plus security alerts for tools you follow. Double opt-in, one-click unsubscribe.
About
Use cases: frontend
Reviews
Write a reviewNo reviews yet. Installed it? Reviews come from verified installers only. How reviews work
Permissions
What this skill can do and what it asks for, from its SKILL.md. Checked Oct 25, 2026.
- Tools
- No tools found
- Secrets
- None asked for
- Install scripts
- None found
Network hosts it talks to 1
codeload.github.com· found in install command
Files it touches
~/.claude/skills/components
What's inside
- Skill name
components- Description
- Use when designing, implementing, or reviewing React/TypeScript components with naming conventions, props typing, hooks usage, and UnoCSS styling standards.
- License
- Apache-2.0
- Instructions
- 24 lines in SKILL.md · view on GitHub
Files (5)
- SKILL.md
- openai.yaml · agents/
- checklist.md · references/
- standards.md · references/
- templates.md · references/
SKILL.md (first lines)
# Components ## Overview Design and review React/TypeScript components with consistent naming, typing, hooks, and UnoCSS styling. ## Quick Workflow 1. Define component type and responsibility (UI, business, container, page, layout). 2. Define props and dependencies explicitly. 3. Implement with typed props and function components. 4. Apply UnoCSS classes and CSS variables. 5. Review against the checklist. ## Common Mistakes - Mixing UI and data-fetch logic in a single component. - Missing props types or using `any`. - Inline styles instead of UnoCSS utilities. - Unstable callbacks and missing dependency arrays. ## Resources - `references/standards.md` - `references/checklist.md` - `references/templates.md`
From JsonLee12138/prompts, Apache-2.0.
More from JsonLee12138/prompts
- 0.507score
actions-npm
JsonLee12138
Use when creating or debugging GitHub Actions workflows that publish npm packages with trusted publishing / OIDC.
SkillCFreshness: C★ 2Claude Code +9 - 0.448score
claude-design
JsonLee12138
Unified design workflow router for critique, accessibility review, developer handoff, design system work, UX copy, user research, and research synthesis.
SkillDFreshness: D★ 2Claude Code +9 - 0.448score
design-patterns-principles
JsonLee12138
Use when a request asks for software design patterns or design principles, including explanations, comparisons, summaries, or quick reference grounded in…
SkillDFreshness: D★ 2Claude Code +9 - 0.448score
eslint-config
JsonLee12138
Use when configuring ESLint with @antfu/eslint-config for a single project or a monorepo workspace, including flat config setup, shared config packages…
SkillDFreshness: D★ 2Claude Code +9 - 0.448score
makefile
JsonLee12138
Use when creating, editing, or validating Makefiles.
SkillDFreshness: D★ 2Claude Code +9 - 0.448score
solo-ops
JsonLee12138
AI team role manager for multi-agent development workflows.
SkillDFreshness: D★ 2Claude Code +9 - 0.448score
unocss-shadcn
JsonLee12138
Configure UnoCSS with unocss-preset-shadcn using a semi-automatic, framework-agnostic workflow.
SkillDFreshness: D★ 2Claude Code +9 - 0.448score
vite-tanstack
JsonLee12138
TanStack (Router/Query/Form/Table) configuration guide for Vite + React projects.
SkillDFreshness: D★ 2Claude Code +9 - 0.417score
brainstorming
JsonLee12138
You MUST use this before any creative work - creating features, building components, adding functionality, or modifying behavior.
SkillDFreshness: D★ 2Claude Code +9
Signals
- Stars
- 2
- Forks
- 0
- Open issues
- 0
- Last commit (this folder)
- Feb 20, 2026 (8 months ago)
From GitHub (fetched Oct 24, 2026).
Details
- License
- Apache-2.0
- Repository
- github.com/JsonLee12138/prompts
- First seen
- Oct 24, 2026
- Last checked
- Oct 24, 2026
- Source
- GitHubgithub-graphql
More from JsonLee12138
- 0.507score
actions-npm
JsonLee12138
Use when creating or debugging GitHub Actions workflows that publish npm packages with trusted publishing / OIDC.
SkillCFreshness: C★ 2Claude Code +9 - 0.502score
task-splitting
JsonLee12138
Decompose requirement, design, or brainstorming documents into reviewable task drafts with one function per task and one file per task, then create…
SkillDFreshness: D★ 33Claude Code +9 - 0.502score
prompt-engineering-patterns
JsonLee12138
Master advanced prompt engineering techniques to maximize LLM performance, reliability, and controllability in production.
SkillDFreshness: D★ 33Claude Code +9 - 0.497score
mckinsey-consultant
JsonLee12138
McKinsey-style business consultant for hypothesis-driven problem solving, structured analysis, and strategic recommendations Use when the user asks for…
SkillDFreshness: D★ 33Claude Code +9 - 0.497score
pm
JsonLee12138
Full-stack product manager covering strategy, discovery, execution, go-to-market, market research, data analytics, marketing growth, and PM toolkit Use when…
SkillDFreshness: D★ 33Claude Code +9 - 0.497score
pencil-designer
JsonLee12138
Senior Pencil UI/UX Designer specializing in design systems, responsive interfaces, and accessible applications with mandatory Pencil MCP integration Use when…
SkillDFreshness: D★ 33Claude Code +9
Cite this page
components skill. Agent Mart. https://agentmart.dev/skills/jsonlee12138-components (last updated 2026-10-24)