Individual skill
design
Use when designing, redesigning, or improving a frontend interface in Angular, React, or Blazor. Use for landing pages, dashboards, components, forms, and responsive layouts that must work mobile-first and then scale to desktop.
skills/design/SKILL.md
Source commit b3dd7adf7da9200bbc81c4e300905e9e932d538c
What was checked
- Matches the observed repository HEAD
- Yes
- Scanner rules are current
- No
- Repository scan complete
- No
- Skill scan complete
- Yes
- Observed behavior
- Not checked yet
- Last checked
- Nov 5, 2026
These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.
Install this skill
Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.
An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.
Repository context
- Repository stars (not skill ratings)
- 15
- Repository last updated
- Oct 27, 2026
- License
- MIT
Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.
- agent-harness Repository topic
- agent-skills Repository topic
- ai-agent Repository topic
- claude-code Repository topic
- claude-skills Repository topic
- codex Repository topic
- cursor Repository topic
- devin Repository topic
- mcp Repository topic
- mcp-server Repository topic
- design Derived category
- engineering Derived category
- engineering-web Derived category
Files and excerpt
File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.
Browse files
SKILL.mdcore · 10,545 bytesreferences/accessibility.mddoc · 1,190 bytesreferences/angular-design.mddoc · 3,652 bytesreferences/anti-patterns.mddoc · 2,588 bytesreferences/blazor-design.mddoc · 2,791 bytesreferences/color-system.mddoc · 1,143 bytesreferences/components-patterns.mddoc · 2,196 bytesreferences/craft-floor.mddoc · 2,876 bytesreferences/css-frameworks.mddoc · 5,097 bytesreferences/design-tokens.mddoc · 1,246 bytesreferences/framework-comparison.mddoc · 1,869 bytesreferences/harden.mddoc · 2,446 bytesreferences/layout-grid.mddoc · 1,166 bytesreferences/mobile-first.mddoc · 1,873 bytesreferences/motion.mddoc · 1,274 bytesreferences/onboard.mddoc · 1,606 bytesreferences/polish.mddoc · 2,377 bytesreferences/react-design.mddoc · 3,714 bytesreferences/responsive-breakpoints.mddoc · 1,427 bytesreferences/shape.mddoc · 2,990 bytesreferences/spacing-system.mddoc · 1,223 bytesreferences/testing-responsive.mddoc · 1,016 bytesreferences/typography.mddoc · 1,514 bytesreferences/ux-writing.mddoc · 1,115 bytes
Read excerpt
# Design — Frontend UI Design for Angular, React & Blazor
You are a senior frontend design lead. Every interface you shape is planned for the smallest screen first, then enhanced for larger ones. Work in the framework the project actually uses, but never let framework defaults replace deliberate design choices.
## When to Use
- The user asks to design, redesign, polish, or critique a frontend UI.
- The project uses Angular, React, or Blazor (or the target is not yet known).
- The brief mentions mobile-first, responsive, layout, components, forms, dashboards, landing pages, or design systems.
- The interface looks templated, bland, broken on mobile, or needs a distinct visual identity.
## Core Principles
1. **Mobile-first, always.** Start the design at 375px. Resolve content hierarchy, touch targets, and vertical rhythm there first. Then add columns, sidebars, and widows for larger breakpoints.