# Frontend Design Systems > Workflow for generating production-quality frontend interfaces using React, Tailwind CSS, and shadcn/ui with strong focus on spacing, alignment, readability, and non-generic visual design. - Skill: `composio-community/frontend-design-systems` (Agent Skill) - Install (CLI): `npx skillmds@latest add composio-community/frontend-design-systems` - Raw SKILL.md: https://api.skillmd.com/api/skills/composio-community/frontend-design-systems/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: composio-community (https://skillmd.com/u/composio-community) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/composio-community/frontend-design-systems --- # Frontend Design Systems ## Overview This skill enables Claude to generate high-quality frontend interfaces using: - React - Tailwind CSS - shadcn/ui - modern layout systems - production-ready component architecture The workflow focuses on: - spacing consistency - visual hierarchy - alignment precision - responsive layouts - clean component composition - avoiding generic “AI-generated” design patterns The goal is to create interfaces that feel polished, intentional, and professionally designed rather than autogenerated or visually noisy. --- # Setup Before starting: 1. Install Node.js: https://nodejs.org 2. Create a Next.js project: ```bash npx create-next-app@latest ``` 3. Install Tailwind CSS: ```bash npm install tailwindcss @tailwindcss/postcss postcss ``` 4. Install shadcn/ui: ```bash npx shadcn@latest init ``` 5. Start development server: ```bash npm run dev ``` Recommended tools: - VS Code - Tailwind CSS - shadcn/ui - React DevTools - Figma references (optional) Recommended extensions: - Tailwind CSS IntelliSense - ES7 React snippets - Prettier - Error Lens --- # Inputs Required - UI requirements - Layout goals - Branding direction - Target platform: - SaaS dashboard - landing page - admin panel - mobile-first UI - startup website Optional: - Design references - Existing design system - Brand colors - Typography preferences --- # When to Use This Skill Use this skill when: - building React interfaces - designing SaaS dashboards - creating landing pages - generating reusable UI systems - improving frontend polish - designing responsive layouts - building production-ready frontend experiences --- # When NOT to Use Do NOT use this skill for: - backend-only systems - raw HTML prototypes without design requirements - non-React frontend stacks - purely experimental visual art projects --- # Example Use Case > Create a modern AI startup landing page using React, Tailwind, and shadcn/ui. Claude should: 1. Create a clean layout hierarchy 2. Use proper spacing systems 3. Build reusable UI sections 4. Maintain visual consistency 5. Avoid cluttered layouts 6. Use responsive design patterns 7. Generate polished production-ready code Final result should: - feel modern and intentional - avoid generic AI-generated layouts - maintain strong readability - support responsive behavior - remain scalable and maintainable --- # Core Frontend Design Principles ## 1. Prioritize Spacing & Alignment Good frontend design depends heavily on spacing consistency. Claude should focus on: - predictable spacing systems - clean alignment - visual breathing room - balanced layouts Spacing quality strongly affects: - perceived professionalism - readability - usability - visual polish Avoid: - cramped layouts - inconsistent padding - uneven spacing - visually noisy sections --- ## 2. Build Strong Visual Hierarchy Interfaces should clearly communicate: - what matters most - where attention should go - how content is grouped Use hierarchy through: - typography scale - spacing - layout structure - contrast - component sizing Good hierarchy improves: - readability - navigation - usability --- ## 3. Avoid “AI-Flavored” Design Generated UIs often feel generic because they: - overuse gradients - overcrowd layouts - misuse shadows - lack spacing discipline - prioritize decoration over structure Claude should prioritize: - restraint - clean composition - intentional spacing - readable layouts - subtle visual polish Professional interfaces usually feel: - calm - structured - balanced - intentional --- ## 4. Keep Components Reusable UI systems should remain: - modular - composable - scalable - maintainable Preferred structure: ```plaintext components/ ui/ layout/ sections/ ``` Reusable systems improve: - development speed - consistency - scalability --- ## 5. Use Tailwind Correctly Tailwind should improve clarity, not create class chaos. Preferred workflow: - consistent spacing scale - reusable patterns - grouped utility structure Avoid: - excessive inline complexity - unreadable utility chains - inconsistent sizing systems Good Tailwind usage improves: - maintainability - iteration speed - design consistency --- ## 6. Use shadcn/ui As a Foundation shadcn/ui should provide: - accessible primitives - scalable component structure - clean interaction systems Claude should: - customize layouts intentionally - avoid default-template appearance - extend components thoughtfully The goal is: - polished customization - not generic copy-paste interfaces --- # Workflow ## 1. Define Layout Structure Start by identifying: - page hierarchy - content sections - navigation flow - responsive behavior Example: - Hero - Features - Testimonials - Pricing - CTA Focus on: - clarity - spacing rhythm - visual flow --- ## 2. Build Core Layout System Create: - containers - spacing systems - responsive grids - reusable wrappers Maintain: - consistent max widths - predictable spacing - responsive scaling Avoid: - inconsistent breakpoints - random spacing values - overly dense sections --- ## 3. Generate Reusable Components Create: - buttons - cards - navbars - forms - modals - pricing sections Components should: - remain composable - support reuse - maintain visual consistency --- ## 4. Refine Typography & Spacing Adjust: - font scale - section spacing - line height - alignment - whitespace Typography should improve: - readability - hierarchy - professionalism Spacing should create: - breathing room - clean rhythm - balanced composition --- ## 5. Improve Responsiveness Validate: - mobile layouts - tablet behavior - desktop scaling - navigation usability Responsive layouts should: - adapt naturally - preserve hierarchy - maintain spacing quality Avoid: - cramped mobile layouts - oversized desktop spacing - broken component stacking --- ## 6. Add Visual Polish Use: - subtle shadows - restrained gradients - hover transitions - clean borders - balanced contrast Visual polish should support: - clarity - usability - professionalism Avoid: - excessive effects - cluttered visuals - noisy color systems --- ## 7. Final Validation Before shipping validate: - spacing consistency - responsive behavior - alignment precision - readability - accessibility - component consistency Ensure: - the interface feels intentional - layouts remain clean - sections flow naturally --- # Output Expectations The final output should include: - production-quality frontend code - reusable React components - clean Tailwind structure - polished UI systems - responsive layouts - professional visual hierarchy The workflow itself should remain: - scalable - maintainable - readable - component-driven - production-ready --- # Execution Strategy (for AI agents) The agent should: 1. Prioritize spacing and alignment first 2. Build clean visual hierarchy 3. Avoid generic AI-style design patterns 4. Generate reusable component systems 5. Maintain responsive consistency 6. Optimize for readability and maintainability The workflow should optimize for: - visual polish - frontend quality - scalability - readability - professional UI consistency --- # Best Practices - Use spacing consistently - Keep layouts visually calm - Prioritize readability over decoration - Reuse UI patterns - Validate responsiveness early - Keep Tailwind utilities organized - Use shadcn/ui as a customizable foundation --- # Notes - Spacing quality strongly affects perceived frontend quality - Strong alignment improves visual professionalism - Simple layouts usually outperform overly complex ones - Good frontend systems prioritize consistency over decoration - Well-structured UI systems scale significantly better over time