Frontend Design
Create or reshape frontend interfaces with deliberate visual choices tied to the product brief.
Read Local Guide →Publisher: Anthropic
Agent Skills for Interface Design
Choose between creating an interface, reviewing one already built, and inspecting its motion or interaction behavior. They are different design jobs.
An instruction file can give a design review structure, but it cannot replace seeing the actual interface, checking accessibility, or testing interaction on the intended device.
Selected Skills and Original Sources
Web Design Guidelines
Review interface files against current web design guidelines and return focused findings tied to the relevant code.
Read Local Guide →Publisher: Vercel Labs
Design Engineering
Encodes a design-engineering perspective on interface polish, components, motion decisions, and the details that make software feel coherent.
Publisher: Emil Kowalski
Review Animations
Reviews animation code for purpose, timing, interruption, performance, accessibility, and fit with the interface.
Publisher: Emil Kowalski
Apple Design
Applies Apple-inspired principles to web interactions such as gestures, springs, sheets, spatial feedback, and reduced motion.
Publisher: Emil Kowalski
Vercel React View Transitions
Choose React view-transition patterns that connect animation to navigation, shared elements, and meaningful changes in interface state.
Read Local Guide →Publisher: Vercel Labs
Impeccable
Design, audit, and refine interfaces through a single Skill with focused commands and rendered verification.
Read Local Guide →Publisher: pbakaus
This is an independent directory. Check the publisher's source for installation, tools, and availability.
Choose by the Job
Starting a New Interface
Frontend Design and Design Engineering address visual direction and implementation quality from the outset.
Reviewing an Existing Page
Web Design Guidelines provides a review workflow for concrete UI issues rather than a generic style preference.
Checking Motion and Feedback
Use motion-specific guidance when transitions, timing, or reduced-motion behavior needs attention.
Explore Other Skill Categories
Choose the next task, not just the next publisher.
Frequently Asked Questions
Which instructions fit a new interface versus a review?
A new interface needs a visual direction, content hierarchy, and interaction decisions. An existing interface review starts from observed usability or implementation problems. Select design creation guidance for the former and review-oriented guidance for the latter.
Can a design Skill substitute for viewing the actual page?
No. Screenshots and a running interface expose spacing, overflow, contrast, and state changes that a code excerpt cannot establish. Inspect the page at relevant sizes and interact with the controls before declaring the design complete.
What should an accessibility review include beyond color contrast?
Check heading structure, meaningful labels, keyboard navigation, focus visibility, and whether interactions communicate their state. A visually polished screen may still be difficult to operate without a mouse or with assistive technology.
How do I decide whether an animation belongs in the interface?
Ask what change it explains or what feedback it supplies. Test the timing in context and respect reduced-motion preferences. Motion that slows a routine action or distracts from reading should be simplified or removed.
Should I create a new component for every page section?
Reuse an existing component when the structure and purpose match. Extract a shared component when several pages need the same pattern, but keep page-specific content configurable instead of forcing unlike sections into one rigid template.
How can cards stay consistent without repeating generic copy?
Give cards comparable information roles and sentence lengths: what the item does and who or what it helps. Consistent typography and spacing should support that editing; truncation alone cannot turn vague or uneven descriptions into useful content.
Keep Interface Feedback in Context
Bring the page, design references, and review notes together before the next revision.