How does this skill handle responsive design?

It utilizes a fluid design approach using CSS clamp() for typography and spacing, alongside container queries (@container) to ensure components adapt intelligently to their parent context rather than just the viewport.

Does this skill work with specific CSS frameworks?

Yes, while it prioritizes modern CSS standards like container queries and OKLCH, it is compatible with Tailwind CSS, Styled Components, and other popular frameworks used in production environments.

What is 'AI slop' and how does this skill avoid it?

AI slop refers to the repetitive, templated look often found in AI-generated UI, such as generic purple gradients and rounded card grids. This skill avoids it by forcing Claude to commit to specific, bold design directions like brutalism or minimalism.

Can this skill help with accessibility (a11y)?

Yes, the skill includes specific guidelines for color contrast, semantic HTML structures, and focus state management to ensure that creative designs remain fully accessible to all users.

Distinctive Frontend Architect

Name: Distinctive Frontend Architect
Author: nguyendinhquocx

bynguyendinhquocx

デザインツール

Generates production-grade, visually striking frontend interfaces that avoid generic AI aesthetics through professional design principles.

概要

The Frontend Architect skill transforms Claude into a high-end UI/UX specialist, moving beyond generic 'AI-style' templates to create memorable, production-ready web interfaces. By enforcing bold conceptual directions—such as brutalist, editorial, or refined luxury—this skill guides the implementation of sophisticated typography scales, OKLCH color spaces, fluid spatial layouts, and purposeful motion design. It is ideal for developers who need to build components and applications that feel intentionally designed, accessible, and free from the common visual patterns associated with AI-generated code.

主な機能

Implements modern CSS standards including OKLCH colors, container queries, and clamp() fluid sizing.
Provides expert guidance on modular typography, visual hierarchy, and professional font pairing.
Optimizes motion design using exponential easing and performance-first transform animations.
Focuses on production-grade accessibility, semantic HTML, and responsive container-based layouts.
0 GitHub stars
Enforces bold aesthetic directions to prevent generic 'AI slop' visual patterns.

ユースケース

Creating high-end landing pages with unique, editorial-style layouts and distinctive branding.
Building sophisticated design system components with complex interaction states and optimistic UI patterns.
Developing creative web artifacts and dashboards that require a non-standard, memorable user interface.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add nguyendinhquocx/code-ai frontend

For use in Claude.ai and ChatGPT

Download Skill

GitHub

概要

主な機能

Implements modern CSS standards including OKLCH colors, container queries, and clamp() fluid sizing.
Provides expert guidance on modular typography, visual hierarchy, and professional font pairing.
Optimizes motion design using exponential easing and performance-first transform animations.
Focuses on production-grade accessibility, semantic HTML, and responsive container-based layouts.
0 GitHub stars
Enforces bold aesthetic directions to prevent generic 'AI slop' visual patterns.

ユースケース

Creating high-end landing pages with unique, editorial-style layouts and distinctive branding.
Building sophisticated design system components with complex interaction states and optimistic UI patterns.
Developing creative web artifacts and dashboards that require a non-standard, memorable user interface.