← All skill packs

Claude Code: UI Design & Frontend Skills

Skill pack
4 skills0 selected
aibiz-automatyzacjeSkills in this pack

Manage and troubleshoot Coolify deployments using a hybrid CLI + API approach. Auto-configures from .env file (COOLIFYBASEURL, COOLIFYAPITOKEN). Use this skill for server management, app/service/database lifecycle, deployments, environment variables, webhooks, PR previews, metrics, proxy management, audit logs, custom domains, and WordPress troubleshooting on Coolify. Works on Windows 11 PowerShell natively.

English

Wytyczne UX/UI dla React 19 + Tailwind v4. Design system (OKLCH colors), dostępność (WCAG 2.2, ARIA), responsive design (mobile-first, container queries), animacje (Framer Motion, View Transitions, prefers-reduced-motion), UI patterns (navigation, tables, search, onboarding). Używaj przy projektowaniu UI, dostępności, animacjach, mobile UX.

English

Tworzy dopasowany do stacku projektu plik .coderabbit.yaml, żeby CodeRabbit robił automatyczny AI code review każdego pull requesta przed merge. Wykrywa stack (Expo/RN, Next.js, React+Vite, Node, Supabase), skleja config z bazowego template'u + bloków per stack i waliduje YAML. Używaj gdy: „skonfiguruj CodeRabbit\", „dodaj CodeRabbit do projektu\", „coderabbit setup\", „ustaw AI reviewera PR-ów\", „dodaj code review do repo\", „chcę review pull requestów\" — a także przy bootstrapie nowego projektu, gdy user chce mieć reviewera PR od startu.

Polish

Frontend React 19 + TypeScript 5.7+ + TailwindCSS v4 + shadcn/ui dla Vite SPA. Komponenty, React Query, formularze (RHF + Zod), testowanie (Vitest + RTL + MSW), lazy loading, Suspense, Sonner. Używaj przy tworzeniu komponentów, stron, stylowaniu, data fetchingu, formularzach, testach, optymalizacji.

Polish

Includes Coolify Manager, UX UI Guidelines, and other workflows.

Install with
Claude CodeCodexCursorGitHub CopilotGemini CLI

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

Pack stats

Skills4CategoryengineeringStars0

What’s included

Coolify Manager

Manage and troubleshoot Coolify deployments using a hybrid CLI + API approach. Auto-configures from .env file (COOLIFYBASEURL, COOLIFYAPITOKEN). Use this skill for server management, app/service/database lifecycle, deployments, environment variables, webhooks, PR previews, metrics, proxy management, audit logs, custom domains, and WordPress troubleshooting on Coolify. Works on Windows 11 PowerShell natively.

UX UI Guidelines

Wytyczne UX/UI dla React 19 + Tailwind v4. Design system (OKLCH colors), dostępność (WCAG 2.2, ARIA), responsive design (mobile-first, container queries), animacje (Framer Motion, View Transitions, prefers-reduced-motion), UI patterns (navigation, tables, search, onboarding). Używaj przy projektowaniu UI, dostępności, animacjach, mobile UX.

Coderabbit Setup

Tworzy dopasowany do stacku projektu plik .coderabbit.yaml, żeby CodeRabbit robił automatyczny AI code review każdego pull requesta przed merge. Wykrywa stack (Expo/RN, Next.js, React+Vite, Node, Supabase), skleja config z bazowego template'u + bloków per stack i waliduje YAML. Używaj gdy: „skonfiguruj CodeRabbit\", „dodaj CodeRabbit do projektu\", „coderabbit setup\", „ustaw AI reviewera PR-ów\", „dodaj code review do repo\", „chcę review pull requestów\" — a także przy bootstrapie nowego projektu, gdy user chce mieć reviewera PR od startu.

Tailwind React Guidelines

Frontend React 19 + TypeScript 5.7+ + TailwindCSS v4 + shadcn/ui dla Vite SPA. Komponenty, React Query, formularze (RHF + Zod), testowanie (Vitest + RTL + MSW), lazy loading, Suspense, Sonner. Używaj przy tworzeniu komponentów, stron, stylowaniu, data fetchingu, formularzach, testach, optymalizacji.

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 Coolify Manager 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.
  • License details are not provided in these listings. Check the author’s terms before using the skills.
Claude Code: UI Design & Frontend Skills | Agent Skills Atlas