Communitygithub.com

Anhvu1107/all-agent-skill

description: ALWAYS use this for UI and UX direction, design-system choices, landing pages, dashboards, component styling, or stack-specific frontend implementation across React, Next.js, Remix, Svelte, SvelteKit, Astro, Vue, Nuxt, Expo Router, React Native, Flutter, SwiftUI, Jetpack Compose, and shadcn.

What is all-agent-skill?

all-agent-skill is a Claude Code agent skill that description: ALWAYS use this for UI and UX direction, design-system choices, landing pages, dashboards, component styling, or stack-specific frontend implementation across React, Next.js, Remix, Svelte, SvelteKit, Astro, Vue, Nuxt, Expo Router, React Native, Flutter, SwiftUI, Jetpack Compose, and shadcn.

Works with~Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/Anhvu1107/all-agent-skill/tree/HEAD/.agent/skills/ui-ux-pro-max
View original→Browse all skills

Ask in your favorite AI

Open a new chat with this agent skill pre-loaded.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentation

UI/UX Pro Max

Selective Reading Rule

Start with:

  • references/usage-routing.md
  • references/quality-checklist.md

Then load only the inherited docs, scripts, assets, or examples that match the user's actual task.

Selective Reading Rule

Start with:

  • references/senior-master-standard.md
  • references/stack-routing.md
  • references/design-review-checklist.md

Use references/stack-routing.md first to choose the most relevant stack data file and avoid loading irrelevant framework guidance.

Purpose

Turn vague UI requests into an intentional design system plus implementation guidance that matches the actual frontend stack.

Use This Skill When

  • the user asks for any page, component, dashboard, landing page, redesign, polish pass, design system, or frontend visual direction
  • the task includes typography, color, spacing, hierarchy, motion, accessibility, or stack-specific UI implementation
  • you need to avoid generic AI-looking frontend output while still shipping something practical

Data Coverage

This skill now includes curated searchable guidance for 16 stacks:

  • html-tailwind
  • react
  • nextjs
  • remix
  • astro
  • vue
  • nuxtjs
  • nuxt-ui
  • svelte
  • sveltekit
  • shadcn
  • expo-router
  • react-native
  • flutter
  • swiftui
  • jetpack-compose

Workflow

  1. Classify the UI job.
    • landing page, dashboard, app shell, feature surface, component system, or redesign
  2. Choose the stack.
    • use references/stack-routing.md if the stack is implied but not named
  3. Generate the design system.
    • run the bundled search tool with --design-system
  4. Pull the stack-specific guidance.
    • run a stack search for the framework and product type
  5. Review before finalizing.
    • use references/design-review-checklist.md

Commands

From the repository root:

python .agent/skills/ui-ux-pro-max/scripts/search.py "b2b analytics dashboard" --design-system -p "Northstar"
python .agent/skills/ui-ux-pro-max/scripts/search.py "dashboard tables filters" --stack remix
python .agent/skills/ui-ux-pro-max/scripts/search.py "routing navigation optimistic forms" --stack sveltekit

If you are already inside the skill folder, use python scripts/search.py ....

Rules

  • Default to the actual product context, not whatever style looks trendy.
  • Match the stack guidance to the framework in use before inventing patterns.
  • Prefer accessible, responsive, production-grade UI over pretty-but-fragile demos.
  • When working in an existing design system, preserve established patterns before introducing a new direction.

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

Anhvu1107/all-agent-skill

ALWAYS use this when the request matches 007: Security audit, hardening, threat modeling (STRIDE/PASTA), Red/Blue Team, OWASP checks, code review, incident response, and infrastructure security for any project.

Anhvu1107/all-agent-skill

ALWAYS use this when the request matches Agentfolio: Skill for discovering and researching autonomous AI agents, tools, and ecosystems using the AgentFolio directory.

Anhvu1107/all-agent-skill

ALWAYS use this when the request matches Animejs Animation: Advanced JavaScript animation library skill for creating complex, high-performance web animations.

Anhvu1107/all-agent-skill

ALWAYS use this when the request matches Astropy: Astropy is the core Python package for astronomy, providing essential functionality for astronomical research and data analysis.

Anhvu1107/all-agent-skill

ALWAYS use this when the request matches Astro: Build content-focused websites with Astro — zero JS by default, islands architecture, multi-framework components, and Markdown/MDX support.

Anhvu1107/all-agent-skill

ALWAYS use this when the request matches Emotional ARC Designer: One sentence - what this skill does and when to invoke it

Anhvu1107/all-agent-skill

ALWAYS use this when the request matches Fixing Motion Performance: Audit and fix animation performance issues including layout thrashing, compositor properties, scroll-linked motion, and blur effects.

Anhvu1107/all-agent-skill

ALWAYS use this when the request matches I18n Localization: Internationalization and localization patterns.

Anhvu1107/all-agent-skill

ALWAYS use this when the request matches Interactive Portfolio: Expert in building portfolios that actually land jobs and clients - not just showing work, but creating memorable experiences.

Anhvu1107/all-agent-skill

ALWAYS use this when the request matches JQ: Expert jq usage for JSON querying, filtering, transformation, and pipeline integration.

Anhvu1107/all-agent-skill

ALWAYS use this when the request matches Landing Page Generator: Generates high-converting Next.js/React landing pages with Tailwind CSS.

Anhvu1107/all-agent-skill

ALWAYS use this when the request matches LEX: Centralized ''Truth Engine'' for cross-jurisdictional legal context (US, EU, CA) and contract scaffolding.

Anhvu1107/all-agent-skill

ALWAYS use this when the request matches Magic Animator: AI-powered animation tool for creating motion in logos, UI, icons, and social media assets.

Anhvu1107/all-agent-skill

ALWAYS use this when the request matches Makepad Animation: CRITICAL: Use for Makepad animation system.

Anhvu1107/all-agent-skill

ALWAYS use this when the request matches Nextjs APP Router Patterns: Comprehensive patterns for Next.js 14+ App Router architecture, Server Components, and modern full-stack React development.

Anhvu1107/all-agent-skill

ALWAYS use this when the user mentions Nextjs Best Practices, asks to build, debug, review, document, automate, test, configure, migrate, or make decisions in this domain, or the task clearly depends on Nextjs Best Practices; scope: Next.js App Router principles. Apply the bundled workflow, references, scripts, Senior Master standard, and Codex strict review gate before final output.

Anhvu1107/all-agent-skill

description: ALWAYS use this when the work is specifically about modern Next.js or React architecture, data flow, rendering strategy, routing, or performance-sensitive frontend behavior.

Anhvu1107/all-agent-skill

ALWAYS use this when the request matches Nextjs Supabase Auth: Expert integration of Supabase Auth with Next.js App Router

Anhvu1107/all-agent-skill

ALWAYS use this when the task involves reading, extracting, splitting, merging, rotating, creating, validating, OCR-ing, form-filling, or otherwise producing or modifying PDF files.

Anhvu1107/all-agent-skill

ALWAYS use this when the request matches React Nextjs Development: React and Next.js 14+ application development with App Router, Server Components, TypeScript, Tailwind CSS, and modern frontend patterns.

Related Skills

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community