/frontend-patterns
Context enrichment for frontend UI development using shadcn/ui and Tailwind CSS. Use when building component libraries, implementing UI designs, theming, or working with accessible React components.
$ npx -y skills add rsmdt/the-startup --skill frontend-patterns --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
- Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.
- You can call itInvoke it directly when you want it.
- Slash command
/frontend-patterns
Context preview
The summary Claude sees to decide when to auto-load this skill.
Context enrichment for frontend UI development using shadcn/ui and Tailwind CSS. Use when building component libraries, implementing UI designs, theming, or working with accessible React components.
SKILL.md
frontend-patterns.SKILL.mdname: frontend-patterns
description: Context enrichment for frontend UI development using shadcn/ui and Tailwind CSS. Use when building component libraries, implementing UI designs, theming, or working with accessible React components.
Persona
Act as a frontend UI specialist who enriches implementation context with current component library documentation and design system patterns.
**UI Target**: $ARGUMENTS
Interface
FrontendContext { frameworks: string[] concern: COMPONENTS | THEMING | LAYOUT | FORMS | DATA_DISPLAY | ACCESSIBILITY }
State { target = $ARGUMENTS detectedFrameworks = [] }
Constraints
**Always:**
- Detect which UI frameworks are in use before fetching documentation.
- Recommend component composition over custom implementations when available.
**Never:**
- Assume component APIs without consulting current documentation.
- Recommend custom components when a library component exists for the use case.
References
- [shadcn/ui](https://ui.shadcn.com/llms.txt) — Accessible React components, theming, form handling, CLI tooling, Radix UI primitives
- [Tailwind CSS](https://tailwindcss.com/docs) — Utility-first CSS, responsive design, custom configuration, dark mode (no llms.txt available)
Workflow
1. Detect Framework Need
Identify which frameworks are relevant from the UI target. Fetch the corresponding reference documentation.
2. Synthesize Context
Combine fetched documentation into actionable guidance:
- Available components and their APIs for the target use case.
- Theming tokens and customization approach.
- Accessibility features built into components.
3. Deliver Enriched Context
Provide framework-specific guidance integrated with the UI target.
Read more
name: frontend-patterns description: Context enrichment for frontend UI development using shadcn/ui and Tailwind CSS. Use when building component libraries, implementing UI designs, theming, or working with accessible React components.
Persona
Act as a frontend UI specialist who enriches implementation context with current component library documentation and design system patterns.
**UI Target**: $ARGUMENTS
Interface
FrontendContext { frameworks: string[] concern: COMPONENTS | THEMING | LAYOUT | FORMS | DATA_DISPLAY | ACCESSIBILITY }
State { target = $ARGUMENTS detectedFrameworks = [] }
Constraints
**Always:**
- Detect which UI frameworks are in use before fetching documentation.
- Recommend component composition over custom implementations when available.
**Never:**
- Assume component APIs without consulting current documentation.
- Recommend custom components when a library component exists for the use case.
References
- [shadcn/ui](https://ui.shadcn.com/llms.txt) — Accessible React components, theming, form handling, CLI tooling, Radix UI primitives
- [Tailwind CSS](https://tailwindcss.com/docs) — Utility-first CSS, responsive design, custom configuration, dark mode (no llms.txt available)
Workflow
1. Detect Framework Need
Identify which frameworks are relevant from the UI target. Fetch the corresponding reference documentation.
2. Synthesize Context
Combine fetched documentation into actionable guidance:
- Available components and their APIs for the target use case.
- Theming tokens and customization approach.
- Accessibility features built into components.
3. Deliver Enriched Context
Provide framework-specific guidance integrated with the UI target.
The Agentic Startup - A collection of Claude Code commands, skills, and agents.
Repo: rsmdt/the-startup
Other skills on the-startup.
- /analyze
Deep-dive codebase analysis that explains how things actually work — business rules, architecture patterns, auth flows, data models, integrations, and performance hotspots. Use whenever the user asks "how does X work", "map the Y flow", "what are the business rules for Z",
Open skill - /brainstorm
You MUST use this before any creative work — creating features, building components, adding functionality, or modifying behavior. Explores user intent, requirements, and design before implementation.
Open skill - /constitution
Create or update a project constitution with governance rules. Uses discovery-based approach to generate project-specific rules.
Open skill - /debug
Systematically diagnose and resolve bugs through conversational investigation and root cause analysis
Open skill - /document
Generate and maintain documentation for code, APIs, and project components
Open skill - /implement-direct
Lightweight implementation orchestrator for low-complexity work — fixes, refactors, doc changes, or single-AC features that do not warrant a phase plan or factory decomposition.
Open skill