What problem does it solve? Frontend screens often end up looking generic and AI-generated, with vague copy, decorative gradients, and repeated card templates. This Skill provides a structured design and review workflow so Astro, React, and Tailwind interfaces feel specific, credible, and consistent with the project's design system. ## Core Features & Use Cases - Design Workflow: Reads local context first (tokens, components, copy tone, route role), states each screen's job, and prefers existing Tailwind tokens and shared components over new visual language. - Anti-AI Checks: Flags generic gradient blobs, repeated section templates, vague marketing copy, one-note palettes, oversized display type, and nested decorative cards. - Component Organization: Defines where route-only sections, shared primitives, and reusable cards belong (src/page-modules, src/components/ui, src/components) and when to promote components. - Visual QA: Verifies desktop and mobile rendering, text wrapping, hit targets, contrast, reduced-motion behavior, and realistic data states before finishing. - Use Case: When building a landing page or institutional site section, apply this Skill to replace vague copy like "soluciones innovadoras" with concrete content and ensure the first viewport communicates the actual product. ## Quick Start Use the human-design-frontend skill to review this landing page section and make it feel specific, credible, and consistent with the existing Tailwind design system.
