Frontend Design

Skill: Frontend Design

When to Use

Activate this skill when the user requests:

• Building web components, pages, or full applications
• Creating UI/UX interfaces with modern design
• Converting designs to code
• Building responsive layouts
• Implementing interactive elements
• Frontend development with React, TypeScript, or modern frameworks

Trigger keywords: "build", "create", "frontend", "component", "page", "UI", "interface", "design", "web app"

Do not activate for backend services, database operations, or CLI applications.

Purpose

Generate production-grade frontend interfaces that are:

• Visually distinctive and polished
• Built with modern best practices
• Responsive and accessible
• Interactive and engaging
• Avoiding generic AI aesthetics

Scope

Included

• React components with TypeScript
• Modern CSS frameworks (Tailwind CSS)
• Component libraries (shadcn/ui)
• Responsive design patterns
• Interactive UI elements
• Icon integration (Lucide React)
• State management patterns
• Form handling and validation

Excluded

• Backend API development
• Database schema design
• Server-side rendering configuration
• Build tooling setup
• Testing framework setup

Inputs

• requirements: Description of what to build
• framework: Target framework (default: React + TypeScript)
• styling: Styling approach (default: Tailwind CSS)
• components: Component library preference (default: shadcn/ui)
• features: Specific functionality requirements
• responsive: Breakpoint requirements (default: mobile-first)

Step-by-step Execution

1. Requirements Analysis

• Parse user requirements and identify core components needed
• Determine layout structure and responsive behavior
• Identify interactive elements and state requirements

1. Technology Stack Selection

• Use TypeScript for type safety
• Apply Tailwind CSS for styling
• Integrate shadcn/ui components where appropriate
• Include Lucide React for icons

1. Component Architecture

• Create modular, reusable components
• Implement proper TypeScript interfaces
• Follow React best practices (hooks, composition)
• Ensure proper separation of concerns

1. Styling Implementation

• Apply modern design principles
• Use consistent spacing and typography scales
• Implement responsive breakpoints
• Add hover states and transitions

1. Interactive Features

• Implement state management with useState/useReducer
• Add form validation where needed
• Include loading states and error handling
• Add keyboard navigation support

1. Quality Assurance

• Verify TypeScript compilation without errors
• Ensure responsive behavior across breakpoints
• Test interactive elements and accessibility
• Validate design consistency

Output Contract

Code Structure

ComponentName/
├── ComponentName.tsx       # Main component
├── types.ts               # TypeScript interfaces
└── index.ts              # Export file

Code Quality

• Strict TypeScript typing (no any)
• ESLint compliant code
• Consistent naming conventions
• Proper component composition
• Accessibility attributes (ARIA labels, semantic HTML)

Design Quality

• Modern, professional appearance
• Consistent design system
• Responsive across mobile/tablet/desktop
• Smooth animations and transitions
• Intuitive user experience

Verification Commands

# Type checking
npx tsc --noEmit

# Linting
npm run lint

# Build verification (if applicable)
npm run build

# Format check
npx prettier --check src/

Evidence Format

• Screenshots: Visual proof of responsive design
• Code Quality: TypeScript compilation without errors
• Accessibility: WCAG compliance verification
• Performance: Lighthouse scores (if applicable)
• Cross-browser: Testing across modern browsers

Safety / DONTs

Security

• Never hardcode API keys or sensitive data
• Sanitize user inputs in forms
• Use proper HTTPS for external resources
• Validate data before processing

Performance

• Don't create unnecessarily deep component nesting
• Avoid inline styles for complex styling
• Don't load unused dependencies
• Minimize re-renders with proper React patterns

Accessibility

• Don't omit alt text for images
• Always provide keyboard navigation
• Don't use color alone to convey information
• Ensure proper heading hierarchy

Code Quality

• No any types in TypeScript
• Don't mix styling approaches (stay consistent with Tailwind)
• Don't create monolithic components
• Avoid hardcoded values (use design tokens)

Gotchas

• shadcn/ui components often require manual installation before use (npx shadcn-ui@latest add ).
• Tailwind arbitrary values (like w-[320px]) can break responsive design if overused.
• Radix UI Icons (often used with shadcn) have different naming conventions than Lucide React.
• React Server Components (RSC) limits what can be passed as props (e.g. functions cannot be serialized).
• Mobile-first approach means base classes are for mobile, md: prefix is for tablet/desktop.

Verification Checklist

• [ ] TypeScript compiles without errors
• [ ] All components are properly typed
• [ ] Responsive design works on mobile/tablet/desktop
• [ ] Interactive elements respond appropriately
• [ ] Loading states are implemented where needed
• [ ] Error boundaries handle edge cases
• [ ] Accessibility attributes are present
• [ ] Code follows project conventions
• [ ] No console errors in browser
• [ ] Design is visually polished and distinctive

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: samilozturk
• Source: samilozturk/agentlint
• License: MIT
• Homepage: https://www.npmjs.com/package/@agent-lint/cli

Install and usage instructions live in the source repository linked above.