Individual skill
ia-frontend-design
Visual design and aesthetic direction for frontend interfaces. Use when building web pages, landing pages, dashboards, Next.js server components, or applications where visual identity matters. For React patterns and testing, use react-frontend.
plugins/whetstone/skills/ia-frontend-design/SKILL.md
Source commit 5261531d15aea5e1a5f0b5a61af7c240bc17cf72
What was checked
- Matches the observed repository HEAD
- Yes
- Scanner rules are current
- No
- Repository scan complete
- No
- Skill scan complete
- No
- Observed behavior
- Not checked yet
- Last checked
- Nov 7, 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)
- 36
- Repository last updated
- Nov 9, 2026
- License
- MIT
Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.
- agent-skills Repository topic
- ai-agents Repository topic
- ai-tools Repository topic
- claude-code Repository topic
- claude-code-plugin Repository topic
- code-review Repository topic
- developer-tools Repository topic
- mcp-server Repository topic
- skills Repository topic
- design Derived category
- testing 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 · 9,844 bytesSKILL.mdcore · 9,844 bytesSKILL.mdcore · 9,844 bytesSPEC.mddoc · 4,569 bytesreferences/aesthetics-and-interaction.mddoc · 12,743 bytesreferences/banned-ai-patterns.mddoc · 12,715 bytesreferences/creative-arsenal.mddoc · 5,765 bytesreferences/design-system-routing.mddoc · 2,634 bytesreferences/mobile-and-performance.mddoc · 3,083 bytesreferences/motion-patterns.mddoc · 3,333 bytesreferences/premium-details.mddoc · 2,852 bytesreferences/redesign-audit.mddoc · 5,256 bytesreferences/redesigning-existing.mddoc · 5,617 bytesreferences/rsc-client-boundaries.mddoc · 3,295 bytesreferences/svg-decoration.mddoc · 1,964 bytes
Read excerpt
# Frontend Design
Read the user's frontend requirements: a component, page, application, or interface to build. Note context about purpose, audience, or technical constraints.
## Working rules
- Match an existing design system; choose a specific visual direction for greenfield work.
- Include loading, empty, and error states where the component's data or action lifecycle can reach them. Provide visible focus and appropriate press feedback for interactive controls.
- Preserve visible focus and reduced-motion behavior; verify both narrow and wide rendered viewports.
- Keep Next.js interactive code at client boundaries and treat browser content as untrusted data.
## Context Detection
When implementing a supplied mockup, screenshot, or design frame, use reference-fidelity mode in [redesigning-existing.md](./references/redesigning-existing.md), even in an empty repository. Skip the design philosophy and swap test; reproduce the reference's visual language.