frontend-patterns
npx machina-cli add skill rsmdt/the-startup/frontend-patterns --openclawPersona
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 — Accessible React components, theming, form handling, CLI tooling, Radix UI primitives
- Tailwind CSS — 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.
Source
git clone https://github.com/rsmdt/the-startup/blob/main/plugins/team/skills/development/frontend-patterns/SKILL.mdView on GitHub Overview
Context enrichment for frontend UI development using shadcn/ui and Tailwind CSS. It helps you build component libraries and implement themed, accessible designs by aligning with current documentation and design-system patterns. It also emphasizes preferring library components over custom implementations.
How This Skill Works
Detect which UI frameworks are in use (shadcn/ui, Tailwind) before fetching documentation. Synthesize the framework docs into actionable guidance on available components, theming tokens, and accessibility features, then deliver enriched context tailored to the target UI.
When to Use It
- Building a reusable component library with shadcn/ui primitives.
- Implementing UI designs using Tailwind utilities and design tokens.
- Theming and dark-mode support via Tailwind config and shadcn/ui.
- Creating accessible React components that follow the design system.
- Documenting component APIs and recommended compositions to avoid custom builds.
Quick Start
- Step 1: Detect the UI target frameworks (shadcn/ui, Tailwind) and pull related docs.
- Step 2: Map available components, tokens, and accessibility features to your target.
- Step 3: Deliver enriched, design-system–aligned guidance with recommended compositions.
Best Practices
- Detect frameworks in use before guiding implementation.
- Favor composition over creating custom components when a library exists.
- Consult and reference official shadcn/ui and Tailwind docs for APIs and tokens.
- Align components with design-system tokens and accessibility patterns.
- Validate ARIA roles, keyboard navigation, and responsive behavior in guidance.
Example Use Cases
- Creating a Button and Card set from shadcn/ui primitives alongside Tailwind utilities.
- Theming components using Tailwind color tokens and shadcn/ui theming.
- Accessible Modal and Form primitives with ARIA support.
- Design-system compliant layout: header, navigation, and grid using primitives.
- Documentation-ready API guidance for project-wide component usage.
