← All skill packs

UI Design & Frontend Skills

Skill pack
2 skills0 selected
pproencaSkills in this pack

The Twelve-Factor App methodology for building scalable, maintainable cloud-native applications. Use when designing backend services, APIs, microservices, or any software-as-a-service application. Triggers on deployment patterns, configuration management, process architecture, logging, and infrastructure decisions.

English

Anti-slop web frontend skill — AUTO-TRIGGER mọi web UI task. Force ship Kimi/Lovable-tier quality bằng 3 luật cứng: (1) Turn 1 emit Discovery Form lock brief TRƯỚC khi gen pixel (cho task lớn) hoặc apply quality bar (cho tweak nhỏ), (2) Turn 2 pick 1 trong 5 visual directions deterministic (OKLch palette + font + posture) hoặc extract brand-spec — KHÔNG freestyle, (3) Turn 3+ TodoWrite plan → live updates → 27 anti-pattern checklist + 5-dim critique + quality tier scoring → ship single artifact. AUTO-TRIGGER khi: chạm file .tsx/.jsx/.ts/.vue/.svelte/.astro/.html/.css/.scss/.tailwind, hoặc user nói "build/sửa/render/design/tạo/refactor" + "page/landing/UI/component/storefront/admin/site/web/trang/giao diện/style/theme", hoặc "design như Kimi/Lovable/Linear/Stripe/Apple/Monocle/Vercel/Notion". Bao gồm: 9 references (directions/discovery-form/anti-slop/critique/design-md-format/quality-tiers/hero-patterns/section-blueprints/motion-recipes), 8 starter design systems (Kimi, Lovable, Linear, Stripe, Apple, Monocle, Brutalist, Datadog). Distilled từ open-design (24K stars), taste-skill, impeccable.style, getdesign.md, kimi.com, lovable.dev, huashu-design, guizang-ppt. KHÔNG dùng cho: mobile (Flutter/iOS/Android/RN — dùng mobile-design), backend (API/DB), config/infra (CI/env/docker).

English

Includes Twelve Factor App and other workflows.

Install with
Claude CodeCodexCursorGitHub CopilotGemini CLI

Supported by the Atlas install prompt. Skill-specific requirements vary.

Pack stats

Skills2CategoryengineeringStars0

What’s included

Twelve Factor App

The Twelve-Factor App methodology for building scalable, maintainable cloud-native applications. Use when designing backend services, APIs, microservices, or any software-as-a-service application. Triggers on deployment patterns, configuration management, process architecture, logging, and infrastructure decisions.

Web Taste

Anti-slop web frontend skill — AUTO-TRIGGER mọi web UI task. Force ship Kimi/Lovable-tier quality bằng 3 luật cứng: (1) Turn 1 emit Discovery Form lock brief TRƯỚC khi gen pixel (cho task lớn) hoặc apply quality bar (cho tweak nhỏ), (2) Turn 2 pick 1 trong 5 visual directions deterministic (OKLch palette + font + posture) hoặc extract brand-spec — KHÔNG freestyle, (3) Turn 3+ TodoWrite plan → live updates → 27 anti-pattern checklist + 5-dim critique + quality tier scoring → ship single artifact. AUTO-TRIGGER khi: chạm file .tsx/.jsx/.ts/.vue/.svelte/.astro/.html/.css/.scss/.tailwind, hoặc user nói "build/sửa/render/design/tạo/refactor" + "page/landing/UI/component/storefront/admin/site/web/trang/giao diện/style/theme", hoặc "design như Kimi/Lovable/Linear/Stripe/Apple/Monocle/Vercel/Notion". Bao gồm: 9 references (directions/discovery-form/anti-slop/critique/design-md-format/quality-tiers/hero-patterns/section-blueprints/motion-recipes), 8 starter design systems (Kimi, Lovable, Linear, Stripe, Apple, Monocle, Brutalist, Datadog). Distilled từ open-design (24K stars), taste-skill, impeccable.style, getdesign.md, kimi.com, lovable.dev, huashu-design, guizang-ppt. KHÔNG dùng cho: mobile (Flutter/iOS/Android/RN — dùng mobile-design), backend (API/DB), config/infra (CI/env/docker).

Quick start

  1. Choose your skills. Select individual skills above, or choose the entire pack.
  2. Copy the install prompt. Use Copy install prompt above the list.
  3. Send it to your agent. Paste into your coding agent’s chat. Your agent reviews the source and guides the setup.

Try it with your agent

After installation, start with a request like:

Example request
Use the Twelve Factor App skill to help with my task.
Ask me for the context you need before getting started.

Requirements & license

  • A coding agent that can access your project files and install skills.
  • Your agent checks each skill’s instructions, dependencies, and permissions during setup.
  • Reported license for the skills shown: MIT. The author’s terms apply.
UI Design & Frontend Skills | Agent Skills Atlas