atelier

Q: How to install atelier?

Create the skills directory: mkdir -p .claude/skills. Then run: mkdir -p .claude/skills && curl -o .claude/skills/atelier.md https://raw.githubusercontent.com/luminary19/atelier/main/SKILL.md. Finally, /atelier in Claude Code.

Q: What is atelier best for?

atelier is categorized under General. It covers: frontend, design.

New

GitHub TrendingGeneralby luminary19

Atelier - a premium, anti-slop frontend design skill suite for Claude Code: 11 skills + a deepdive knowledge base.

First seen 6/16/2026

Summary

Atelier is a premium frontend design skill suite for Claude Code that combines 11 specialized skills with a deep knowledge base to help developers craft beautiful, anti-slop user interfaces.

It provides expert guidance on design systems, component architecture, and modern CSS techniques to elevate your frontend output.

Install & Usage

Create the skills directory

mkdir -p .claude/skills

Download the skill file

mkdir -p .claude/skills && curl -o .claude/skills/atelier.md https://raw.githubusercontent.com/luminary19/atelier/main/SKILL.md

Invoke in Claude Code

/atelier

Use Cases

Design a cohesive design system with tokens, typography, and spacing scales for a new web app.

Refactor a messy CSS codebase into clean, maintainable utility-first styles.

Generate responsive UI components with proper accessibility and state handling.

Create a dark mode theme with smooth transitions and color contrast compliance.

Optimize a landing page layout for performance and visual hierarchy.

Implement a micro-interaction or animation that enhances user experience without bloat.

Usage Examples

/atelier design system for a dashboard app with primary blue and neutral grays

/atelier refactor this button component to use design tokens and support loading state

/atelier create a responsive card grid with hover effects and dark mode support

View source on GitHub

frontenddesign

Security Audits

LicenseUnknownSourceWarnRepositoryPass

Frequently Asked Questions

What is atelier?

Atelier is a premium frontend design skill suite for Claude Code that combines 11 specialized skills with a deep knowledge base to help developers craft beautiful, anti-slop user interfaces. It provides expert guidance on design systems, component architecture, and modern CSS techniques to elevate your frontend output.

How to install atelier?

To install atelier: create the skills directory (mkdir -p .claude/skills), then run: mkdir -p .claude/skills && curl -o .claude/skills/atelier.md https://raw.githubusercontent.com/luminary19/atelier/main/SKILL.md. Finally, /atelier in Claude Code.

What is atelier best for?

atelier is a skill categorized under General. It is designed for: frontend, design. Created by luminary19.

What can I use atelier for?

atelier is useful for: Design a cohesive design system with tokens, typography, and spacing scales for a new web app.; Refactor a messy CSS codebase into clean, maintainable utility-first styles.; Generate responsive UI components with proper accessibility and state handling.; Create a dark mode theme with smooth transitions and color contrast compliance.; Optimize a landing page layout for performance and visual hierarchy.; Implement a micro-interaction or animation that enhances user experience without bloat..