analyze
Deep-research analysis of a codebase, a topic, or both. Clarifies the question, agrees the research angles with you, then runs a…
@rsmdtInstall SkillDevelopment
Skill
/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.
Claude Code
$ npx -y skills add rsmdt/the-startup --skill frontend-patterns --agent claude-code
Codex
$ npx skills add rsmdt/the-startup --skill frontend-patterns -a codex -y
Cursor
$ npx skills add rsmdt/the-startup --skill frontend-patterns -a cursor -y
Gemini CLI
$ npx skills add rsmdt/the-startup --skill frontend-patterns -a gemini-cli -y
GitHub Copilot
$ npx skills add rsmdt/the-startup --skill frontend-patterns -a github-copilot -y
OpenCode
$ npx skills add rsmdt/the-startup --skill frontend-patterns -a opencode -y
Windsurf
$ npx skills add rsmdt/the-startup --skill frontend-patterns -a windsurf -y
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.
Stats
581
Stars
71
Forks
Active
Maintenance
TypeScript
Language
MIT
License
Last commit
Created
Ships withthe-startup
The Agentic Startup - A collection of Claude Code commands, skills, and agents.
58134 skills16 agents
Stars on GitHub
Momentum
- stars in total
- 581
Other skills on the-startup.
@rsmdtInstall Skillarchive
Consolidate a completed specification into a single archived record and remove its working directory. Use as the final stage…
@rsmdtInstall Skillbrainstorm
Required first step before any creative work — creating features, building components, adding functionality, or modifying…
@rsmdtInstall Skillconstitution
Create or update a project constitution with governance rules. Uses discovery-based approach to generate project-specific rules.
@rsmdtInstall Skilldebug
Systematically diagnose and resolve bugs through conversational investigation and root cause analysis
@rsmdtInstall SkillMore skills from other plugins.
Auto-invoked
brainstorming
You MUST use this before any creative work - creating features, building components, adding functionality, modifying behavior, or…
@obraInstall Skillask-matt
Ask which skill or flow fits your situation. A router over the skills in this repo.
@mattpocockInstall SkillAuto-invoked
Questions about frontend-patterns.
- Which coding agents can use frontend-patterns?
- frontend-patterns installs in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and Windsurf with the skills CLI, using each agent's flag shown on this page. Flowy's auto-invocation, which fires a skill when your prompt matches, runs in Claude Code only.