skills.rest
afonsoft
afonsoftCOMMUNITY
Explore all skills by this author →
Website𝕏@afonsoftGitHub

design

Designs mobile-first responsive frontend interfaces for Angular, React, and Blazor applications.

Updated Jul 21, 2026
Search Tags:#accessibility#react#mobile-first#angular#responsive#frontend design#blazor
One-click install
npx skills add https://github.com/afonsoft/gamehub --skill design-afonsoft
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design
Source: https://github.com/afonsoft/gamehub/tree/main/.claude/skills/design
Command: npx skills add https://github.com/afonsoft/gamehub --skill design-afonsoft

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Frontend interfaces often end up templated, broken on mobile, or indistinguishable from framework defaults. This Skill provides a structured design process that starts at 375px, enforces accessibility and craft quality floors, and adapts deliberately to Angular, React, or Blazor conventions. ## Core Features & Use Cases - Mobile-First Design Process: Frame the brief, choose a mode (Persuade, Operate, Read, Experience), design at 375px, then scale up through content-driven breakpoints. - Framework-Specific Guidance: Dedicated references for Angular, React, and Blazor conventions, plus Bootstrap vs Tailwind CSS framework selection and token mapping. - Quality Enforcement: A craft floor checklist covering contrast (WCAG AA), touch targets, typography, motion, states, and banned anti-patterns, with commands like shape, layout, typeset, colorize, adapt, audit, harden, onboard, and polish. - Use Case: A developer building a game catalog dashboard in Angular asks for a redesign; the Skill plans the mobile layout first, defines design tokens, applies Angular Material overrides, and audits accessibility before shipping. ## Quick Start Ask the assistant to design a mobile-first responsive landing page for your Angular app using the design skill.

Frequently Asked Questions about design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I design a mobile-first responsive layout?▼

Start the design at 375px, resolving content hierarchy, touch targets of at least 44x44px, and one primary action first. Then scale up through named breakpoints (small, medium, large, xlarge) only when the content demands a layout shift.

Should I use Bootstrap or Tailwind CSS for my frontend project?▼

Choose Bootstrap when the team wants a proven component library and fast start while overriding the default look. Choose Tailwind when the design needs a custom feel and the team maintains explicit design tokens. Either way, define tokens before writing components.

Does this design approach work with Angular, React, and Blazor?▼

Yes, it provides dedicated convention references for all three frameworks, covering component boundaries, styling strategies, and responsive patterns. The design decisions come first; the framework is treated as a delivery target, not a creative director.

What accessibility requirements does the design quality floor enforce?▼

It requires WCAG AA contrast (4.5:1 for body text, 3:1 for large text and controls), visible keyboard focus, reduced-motion support, and 44x44px touch targets. Verification uses keyboard walkthroughs, screen readers, and tools like Axe or Lighthouse.

What are common AI-generated design anti-patterns to avoid?▼

Avoid gradient text as decoration, identical rounded cards with soft shadows, all-caps labels, eyebrow kickers above every heading, and fade-and-slide entrances on every section. Instead, make one bold deliberate choice per surface and design every interactive state.

Related Skills

Explore More Design & Creative Skills→
ceshezceshez

shape

Run a structured discovery interview and produce an implementation-guiding design brief.

Community
Intermediate
FHIDevFHIDev
1

designsystem

Guide developers in implementing the FHI Designsystem across React, Angular, Blazor, and Web Components.

Official
Advanced
OthmanAdiOthmanAdi

gmira-a11y

Audit web application accessibility by measuring contrast, focus order, and semantic HTML roles.

Community
Advanced
serverpodserverpod
3.3k

serverpod-flutter-frontend

Generate distinctive Flutter UI code with custom typography, layouts, and animations.

Official
Intermediate