skills.rest
The-Vibe-Company
The-Vibe-CompanyOFFICIAL
Explore all skills by this author →
WebsiteGitHub

design-frontend-dev

Designs and audits frontend interfaces for accessibility, responsiveness, typography, color, and motion.

2.4k|292|Updated Feb 7, 2026
Search Tags:#design systems# accessibility#ui audit#UX review#Typography#Frontend design#Responsive design
One-click install
npx skills add https://github.com/The-Vibe-Company/companion --skill design-frontend-dev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-frontend-dev
Source: https://github.com/The-Vibe-Company/companion/tree/main/.agents/skills/design-frontend-dev
Command: npx skills add https://github.com/The-Vibe-Company/companion --skill design-frontend-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Frontend interfaces often ship with accessibility violations, weak visual hierarchy, generic AI-looking patterns, and broken responsive behavior. This Skill gives an agent a structured design-review and implementation playbook so UI work meets production standards without a dedicated designer reviewing every change.

Core Features & Use Cases

  • Systematic UI audits: Scores accessibility, performance, theming, responsive design, and anti-patterns on a 0-4 scale with P0-P3 severity findings.
  • Focused design references: Loads task-specific guidance for typography, layout, color, motion, UX copy, forms, onboarding, and responsive adaptation only when relevant.
  • Anti-slop enforcement: Detects and rejects generic AI-generated patterns like gradient text, decorative glassmorphism, hero-metric templates, and reflex font choices.
  • Use Case: Ask the agent to audit a dashboard page; it reads your tokens and components, classifies the surface as product UI, and returns a prioritized findings report with concrete fix directions.

Quick Start

Ask the agent to review the frontend quality of a specific page or component and list accessibility, responsive, and visual issues with severity ratings.

Frequently Asked Questions about design-frontend-dev

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

FAQPage Schema
How do I audit a frontend UI for accessibility and design quality?▼

Run the audit flow, which scores five dimensions (accessibility, performance, theming, responsive design, anti-patterns) from 0-4 and reports findings tagged P0-P3 with location, impact, evidence, and fix direction. It checks WCAG contrast, ARIA roles, keyboard navigation, touch targets, and AI-slop patterns.

What is the difference between brand and product UI design review?▼

The skill classifies surfaces into two registers. Brand covers marketing and landing pages where design is the product, allowing bold color strategies and imagery-led layouts. Product covers dashboards and app UI where design serves the task, requiring restrained palettes and 150-250ms functional motion.

Does this skill require installing a CLI or npm package?▼

No. This is an agent-only edition with no CLI, hooks, live browser mode, install flow, or external service dependency. It consists of SKILL.md instructions plus reference files the agent reads on demand.

Can it detect AI-generated looking design patterns?▼

Yes. It maintains explicit ban lists covering gradient text, decorative glassmorphism, hero-metric templates, side-stripe borders, reflex font choices like Inter and Fraunces, and saturated aesthetic lanes. The audit includes a dedicated anti-patterns score.

When should I not use this frontend design skill?▼

Avoid it for non-frontend work such as backend APIs, data pipelines, or infrastructure. It also stays read-only during code review unless you explicitly ask for implementation, and it defers to any host skill's higher-priority safety rules.

Related Skills

Explore More Design & Creative Skills→
aceable-aiaceable-ai
1

tailwind-design-system

Create scalable Tailwind CSS v4 design systems with CSS-first tokens and CVA components.

Official
Advanced
ElvinOuyangElvinOuyang

ios-audit

Audit SwiftUI iOS code for accessibility, performance, HIG, theming, and anti-pattern issues.

Community
Advanced
Fabio29TFabio29T
2

dual-axis-skill-reviewer

Review AI skills with deterministic code checks and LLM analysis.

Community
Advanced
cosmicdreamscosmicdreams

accessibility-scan

Run Pa11y, axe-core, and Lighthouse audits across web pages with JSON scores.

Community
Intermediate