swe-developing-frontend-ui
CommunityBuild consistent, accessible frontend UI for OSE monorepos.
Software Engineering#accessibility#shadcn-ui#design-tokens#frontend-ui#tailwind-css#ui-standards#react-components
Authorwahidyankf
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill eliminates inconsistent, inaccessible, and off-brand frontend UI implementation in OSE-style monorepos by providing repo-specific guidance for TypeScript React component development, design token usage, and accessibility compliance.
Core Features & Use Cases
- Comprehensive UI Guidance: Covers design token mapping, shadcn/ui + Radix composition patterns, accessibility requirements, 13 repo-specific anti-patterns, and per-app brand context for all Next.js frontend apps in the monorepo.
- Standardized Component Development: Provides templates and strict rules for building reusable, accessible UI components that align with repo governance and brand requirements.
- Use Case: A developer building a new data table component for the crud-fs-ts-nextjs educational platform can use this Skill to ensure the component uses the correct blue brand tokens, meets WCAG contrast requirements, and avoids common anti-patterns like nested Card components.
Quick Start
Use this skill to build a new accessible Button component for the crud-fs-ts-nextjs app following the repo's CVA variant and Radix Slot patterns.
Dependency Matrix
Required Modules
None requiredComponents
references
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: swe-developing-frontend-ui Download link: https://github.com/wahidyankf/ose-primer/archive/main.zip#swe-developing-frontend-ui Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 537,000+ vetted skills library on demand.