design-responsive
Mobile-first responsive design for beautiful, multi-device UIs. Breakpoints, fluid layouts,touch optimization, and creative responsive patterns for distinctive experiences across screens.Use when building responsive UIs or adapting for mobile/tablet/desktop:- Creating mobile-first layouts, responsive landing pages, web apps- Defining breakpoints and fluid typography (mobile/tablet/desktop sizes)- Optimizing for touch devices, mobile users, smartphone/tablet interactions- Responsive component patterns (navigation, tables, forms, images)- User mentions "mobile", "responsive", "tablet", "multi-device", "touch"Keywords: responsive, mobile-first, mobile, tablet, desktop, breakpoints, touch, multi-deviceMobile-first approach: Design for mobile constraints first, enhance progressively.Integrates with design-fundamentals: Apply spacing, typography, color systems responsively.
Installation
Details
Usage
After installing, this skill will be available to your AI coding assistant.
Verify installation:
npx agent-skills-cli listMore by phananhtuan09
View allTheme/color selection when user has no aesthetic direction and wants agent to decide. Use when: user is uncertain — "suggest colors", "what theme", "help me choose", "you pick". Keywords: suggest theme, suggest colors, what theme, what colors, help choose, help pick, no direction, you choose, recommend colors Do NOT use for: user has colors/style in mind, applying existing theme.
Accessibility principles for inclusive design - keyboard navigation, screen readers, ARIA, color contrast, and focus management. WCAG compliance for interfaces usable by all. Use when implementing interactive UI components requiring accessibility: - Forms, buttons, links, interactive elements needing keyboard access - Keyboard navigation, focus management, tab order - Screen reader support with semantic HTML and ARIA attributes - Color contrast validation for text/buttons (WCAG AA/AAA standards) - Modals, dialogs, dropdowns needing focus trapping - User mentions "accessible", "WCAG", "disabilities", "keyboard", "screen reader" Keywords: accessible, accessibility, WCAG, keyboard, screen reader, ARIA, contrast, a11y Focus on making UI usable via keyboard, screen readers, assistive technologies.
Code quality validation through linting, type checking, and build verification. Multi-language support for automated quality gates. Use when validating code quality: - After implementation to validate code meets standards - Before creating pull requests or commits - When debugging build/type/lint issues - User explicitly requests quality checks Provides language-specific tool commands and validation workflows for: - JavaScript/TypeScript (ESLint, tsc, build tools) - Python (Ruff, MyPy, Pyright) - Go (golangci-lint, go build) - Rust (Clippy, cargo check/build) - Java (Gradle, Maven) Focuses on detecting issues early through systematic automated checks.
Interactive UI theme generation when user needs help choosing colors/fonts.Generates cohesive themes based on brand personality using color harmony theory.Use when user asks for theme/color help OR building UI without design:- "What theme should I use?" "Help me pick colors" "Generate theme"- "What colors work well together?" "Suggest color palette"- User uncertain about design direction, needs aesthetic suggestions- Building UI/landing page with no design specs, needs complete themeKeywords: theme, color palette, colors, fonts, brand personality, color harmonyInteractive workflow: Ask personality → Present options → Generate custom theme.References pre-defined themes in .claude/themes/.Do NOT load for: User has clear aesthetic/colors, Figma/design file provided.Integrates with design-fundamentals: Generates themes following design principles.