frontend-patterns
# frontend-patterns The frontend-patterns skill enriches React UI development context by detecting whether shadcn/ui or Tailwind CSS applies to your target, fetching current documentation, and synthesizing component recommendations, theming strategies, and accessibility patterns. Use this skill when building component libraries, implementing designs with shadcn/ui and Tailwind CSS, configuring themes, constructing forms, displaying data, or ensuring accessible React components, to avoid custom implementations where library components already solve the problem.
git clone --depth 1 https://github.com/rsmdt/the-startup /tmp/frontend-patterns && cp -r /tmp/frontend-patterns/plugins/team/skills/development/frontend-patterns ~/.claude/skills/frontend-patternsSKILL.md
## 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.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", "trace the auth path", "explore the codebase for patterns", "find all [domain concept]", or needs mechanism-level understanding before making a change. Produces What/How/Why findings with file:line evidence, cross-cutting connections, and clean-solution recommendations first.
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.
Create or update a project constitution with governance rules. Uses discovery-based approach to generate project-specific rules.
Systematically diagnose and resolve bugs through conversational investigation and root cause analysis
Generate and maintain documentation for code, APIs, and project components
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.
Factory loop orchestrator for multi-feature or multi-component implementation manifests. Use for high-complexity work with parallel-eligible workstreams and holdout-scenario evaluation.
Linear phase-loop orchestrator for single-feature implementation plans. Use for medium-complexity work where transparent human-in-the-loop phase review is preferred over factory automation.