Skill570 repo starsupdated 2mo ago

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.

View source Repository: the-startup

Install in Claude Code

Copy

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-patterns

Then start a new Claude Code session; the skill loads automatically.

Definition

SKILL.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.

More from this repository

agentic-patternsSkill

Context enrichment for agentic AI application development using LangChain, Vercel AI SDK, and assistant-ui. Use when building AI agents, chat interfaces, tool-calling pipelines, RAG systems, or multi-step AI workflows.

analyzeSkill

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.

api-contract-designSkill

REST and GraphQL API design patterns, OpenAPI/Swagger specifications, versioning strategies, and authentication patterns. Use when designing APIs, reviewing API contracts, evaluating API technologies, or implementing API endpoints.

architecture-selectionSkill

System architecture patterns including monolith, microservices, event-driven, and serverless, with C4 modeling, scalability strategies, and technology selection criteria. Use when designing system architectures, evaluating patterns, or planning scalability.

brainstormSkill

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.

code-quality-reviewSkill

Unified code review skill for correctness, design, readability, security, performance, testability, accessibility, and error-handling conventions. Use when reviewing changes, enforcing quality standards, or identifying technical debt.

constitutionSkill

Create or update a project constitution with governance rules. Uses discovery-based approach to generate project-specific rules.

debugSkill

Systematically diagnose and resolve bugs through conversational investigation and root cause analysis