diff --git a/.claude-plugin/plugin.json b/.claude-plugin/plugin.json index 6d3bf9c8..621678af 100644 --- a/.claude-plugin/plugin.json +++ b/.claude-plugin/plugin.json @@ -1,7 +1,7 @@ { "name": "antigravity-awesome-skills", "version": "9.9.0", - "description": "Plugin-safe Claude Code distribution of Antigravity Awesome Skills with 1,367 supported skills.", + "description": "Plugin-safe Claude Code distribution of Antigravity Awesome Skills with 1,378 supported skills.", "author": { "name": "sickn33 and contributors", "url": "https://github.com/sickn33/antigravity-awesome-skills" diff --git a/CATALOG.md b/CATALOG.md index 33f52de2..8571c782 100644 --- a/CATALOG.md +++ b/CATALOG.md @@ -2,9 +2,9 @@ Generated at: 2026-02-08T00:00:00.000Z -Total skills: 1381 +Total skills: 1392 -## architecture (91) +## architecture (93) | Skill | Description | Tags | Triggers | | --- | --- | --- | --- | @@ -91,8 +91,10 @@ Total skills: 1381 | `testing-patterns` | Jest testing patterns, factory functions, mocking strategies, and TDD workflow. Use when writing unit tests, creating test factories, or following TDD red-gr... | | testing, jest, factory, functions, mocking, tdd, writing, unit, tests, creating, test, factories | | `threejs-loaders` | Three.js asset loading - GLTF, textures, images, models, async patterns. Use when loading 3D models, textures, HDR environments, or managing loading progress. | threejs, loaders | threejs, loaders, three, js, asset, loading, gltf, textures, images, models, async, 3d | | `tool-design` | Build tools that agents can use effectively, including architectural reduction patterns. Use when creating new tools for agent systems, debugging tool-relate... | | agents, effectively, including, architectural, reduction, creating, new, agent, debugging, related, failures, misuse | +| `ui-pattern` | Generate reusable UI patterns such as card sections, grids, lists, forms, and chart wrappers using StyleSeed Toss primitives. | ui, patterns, design-system, reuse, styleseed | ui, patterns, design-system, reuse, styleseed, generate, reusable, such, card, sections, grids, lists | | `uncle-bob-craft` | Use when performing code review, writing or refactoring code, or discussing architecture; complements clean-code and does not replace project linter/formatter. | clean-code, clean-architecture, solid, code-review, craftsmanship, uncle-bob | clean-code, clean-architecture, solid, code-review, craftsmanship, uncle-bob, uncle, bob, craft, performing, code, review | | `unreal-engine-cpp-pro` | Expert guide for Unreal Engine 5.x C++ development, covering UObject hygiene, performance patterns, and best practices. | unreal, engine, cpp | unreal, engine, cpp, pro, development, covering, uobject, hygiene, performance | +| `ux-flow` | Design user flows and screen structure using StyleSeed UX patterns such as progressive disclosure, hub-and-spoke navigation, and information pyramids. | ux, flows, navigation, product-design, styleseed | ux, flows, navigation, product-design, styleseed, flow, user, screen, structure, such, progressive, disclosure | | `wcag-audit-patterns` | Comprehensive guide to auditing web content against WCAG 2.2 guidelines with actionable remediation strategies. | wcag, audit | wcag, audit, auditing, web, content, against, guidelines, actionable, remediation | | `web3-testing` | Master comprehensive testing strategies for smart contracts using Hardhat, Foundry, and advanced testing patterns. | web3 | web3, testing, smart, contracts, hardhat, foundry | | `wordpress-theme-development` | WordPress theme development workflow covering theme architecture, template hierarchy, custom post types, block editor support, responsive design, and WordPre... | wordpress, theme | wordpress, theme, development, covering, architecture, hierarchy, custom, post, types, block, editor, responsive | @@ -448,7 +450,7 @@ Total skills: 1381 | `yes-md` | 6-layer AI governance: safety gates, evidence-based debugging, anti-slack detection, and machine-enforced hooks. Makes AI safe, thorough, and honest. | yes, md | yes, md, layer, ai, governance, safety, gates, evidence, debugging, anti, slack, detection | | `youtube-automation` | Automate YouTube tasks via Rube MCP (Composio): upload videos, manage playlists, search content, get analytics, and handle comments. Always search tools firs... | youtube | youtube, automation, automate, tasks, via, rube, mcp, composio, upload, videos, playlists, search | -## development (190) +## development (196) | Skill | Description | Tags | Triggers | | --- | --- | --- | --- | @@ -636,14 +638,20 @@ Total skills: 1381 | `typescript-advanced-types` | Comprehensive guidance for mastering TypeScript's advanced type system including generics, conditional types, mapped types, template literal types, and utili... | typescript, advanced, types | typescript, advanced, types, guidance, mastering, type, including, generics, conditional, mapped, literal, utility | | `typescript-expert` | TypeScript and JavaScript expert with deep knowledge of type-level programming, performance optimization, monorepo management, migration strategies, and mode... | typescript | typescript, javascript, deep, knowledge, type, level, programming, performance, optimization, monorepo, migration, tooling | | `typescript-pro` | Master TypeScript with advanced types, generics, and strict type safety. Handles complex type systems, decorators, and enterprise-grade patterns. | typescript | typescript, pro, types, generics, strict, type, safety, complex, decorators, enterprise, grade | +| `ui-component` | Generate a new UI component that follows StyleSeed Toss conventions for structure, tokens, accessibility, and component ergonomics. | ui, components, design-system, frontend, styleseed | ui, components, design-system, frontend, styleseed, component, generate, new, follows, toss, conventions, structure | +| `ui-page` | Scaffold a new mobile-first page using StyleSeed Toss layout patterns, section rhythm, and existing shell components. | ui, page-design, mobile, layout, styleseed | ui, page-design, mobile, layout, styleseed, page, scaffold, new, first, toss, section, rhythm | +| `ui-setup` | Interactive StyleSeed setup wizard for choosing app type, brand color, visual style, typography, and the first screen scaffold. | ui, design-system, setup, frontend, styleseed | ui, design-system, setup, frontend, styleseed, interactive, wizard, choosing, app, type, brand, color | | `ui-ux-pro-max` | Comprehensive design guide for web and mobile applications. Use when designing new UI components or pages, choosing color palettes and typography, or reviewi... | ui, ux, max | ui, ux, max, pro, web, mobile, applications, designing, new, components, pages, choosing | | `uv-package-manager` | Comprehensive guide to using uv, an extremely fast Python package installer and resolver written in Rust, for modern Python project management and dependency... | uv, package, manager | uv, package, manager, extremely, fast, python, installer, resolver, written, rust, dependency | +| `ux-audit` | Audit screens against Nielsen's heuristics and mobile UX best practices using the StyleSeed Toss design language as the implementation context. | ux, audit, usability, mobile, styleseed | ux, audit, usability, mobile, styleseed, screens, against, nielsen, heuristics, toss, language, context | +| `ux-copy` | Generate UX microcopy in StyleSeed's Toss-inspired voice for buttons, empty states, errors, toasts, confirmations, and form guidance. | ux, copywriting, microcopy, frontend, styleseed | ux, copywriting, microcopy, frontend, styleseed, copy, generate, toss, inspired, voice, buttons, empty | +| `ux-feedback` | Add loading, empty, error, and success feedback states to StyleSeed components and pages with practical mobile-first rules. | ux, states, loading, error-handling, styleseed | ux, states, loading, error-handling, styleseed, feedback, add, empty, error, success, components, pages | | `viral-generator-builder` | Expert in building shareable generator tools that go viral - name generators, quiz makers, avatar creators, personality tests, and calculator tools. Covers t... | viral, generator, builder | viral, generator, builder, building, shareable, go, name, generators, quiz, makers, avatar, creators | | `webapp-testing` | To test local web applications, write native Python Playwright scripts. | webapp | webapp, testing, test, local, web, applications, write, native, python, playwright, scripts | | `zod-validation-expert` | Expert in Zod โ€” TypeScript-first schema validation. Covers parsing, custom errors, refinements, type inference, and integration with React Hook Form, Next.js... | zod, validation | zod, validation, typescript, first, schema, covers, parsing, custom, errors, refinements, type, inference | | `zustand-store-ts` | Create Zustand stores following established patterns with proper TypeScript types and middleware. | zustand, store, ts | zustand, store, ts, stores, following, established, proper, typescript, types, middleware | -## general (338) +## general (340) | Skill | Description | Tags | Triggers | | --- | --- | --- | --- | @@ -955,7 +963,9 @@ Total skills: 1381 | `tool-use-guardian` | FREE โ€” Intelligent tool-call reliability wrapper. Monitors, retries, fixes, and learns from tool failures. Auto-recovers from truncated JSON, timeouts, rate ... | reliability, tool-use, error-handling, retries, recovery, agent-infrastructure | reliability, tool-use, error-handling, retries, recovery, agent-infrastructure, guardian, free, intelligent, call, wrapper, monitors | | `turborepo-caching` | Configure Turborepo for efficient monorepo builds with local and remote caching. Use when setting up Turborepo, optimizing build pipelines, or implementing d... | turborepo, caching | turborepo, caching, configure, efficient, monorepo, local, remote, setting, up, optimizing, pipelines, implementing | | `tutorial-engineer` | Creates step-by-step tutorials and educational content from code. Transforms complex concepts into progressive learning experiences with hands-on examples. | tutorial | tutorial, engineer, creates, step, tutorials, educational, content, code, transforms, complex, concepts, progressive | +| `ui-a11y` | Audit a StyleSeed-based component or page for WCAG 2.2 AA issues and apply practical accessibility fixes where the code makes them safe. | ui, accessibility, wcag, audit, styleseed | ui, accessibility, wcag, audit, styleseed, a11y, component, page, aa, issues, apply, practical | | `ui-skills` | Opinionated, evolving constraints to guide agents when building interfaces | ui, skills | ui, skills, opinionated, evolving, constraints, agents, building, interfaces | +| `ui-tokens` | List, add, and update StyleSeed design tokens while keeping JSON sources, CSS variables, and dark-mode values in sync. | ui, tokens, design-system, theming, styleseed | ui, tokens, design-system, theming, styleseed, list, add, update, while, keeping, json, sources | | `ui-ux-designer` | Create interface designs, wireframes, and design systems. Masters user research, accessibility standards, and modern design tools. | ui, ux, designer | ui, ux, designer, interface, designs, wireframes, masters, user, research, accessibility, standards | | `unsplash-integration` | Integration skill for searching and fetching high-quality, free-to-use professional photography from Unsplash. | unsplash, integration | unsplash, integration, skill, searching, fetching, high, quality, free, professional, photography | | `upgrading-expo` | Upgrade Expo SDK versions | upgrading, expo | upgrading, expo, upgrade, sdk, versions | @@ -1115,7 +1125,7 @@ Total skills: 1381 | `workflow-automation` | Workflow automation is the infrastructure that makes AI agents reliable. Without durable execution, a network hiccup during a 10-step payment flow means lost... | | automation, infrastructure, makes, ai, agents, reliable, without, durable, execution, network, hiccup, during | | `x-twitter-scraper` | X (Twitter) data platform skill โ€” tweet search, user lookup, follower extraction, engagement metrics, giveaway draws, monitoring, webhooks, 19 extraction too... | twitter, x-api, scraping, mcp, social-media, data-extraction, giveaway, monitoring, webhooks | twitter, x-api, scraping, mcp, social-media, data-extraction, giveaway, monitoring, webhooks, scraper, data, platform | -## security (170) +## security (171) | Skill | Description | Tags | Triggers | | --- | --- | --- | --- | @@ -1275,6 +1285,7 @@ Total skills: 1381 | `threat-modeling-expert` | Expert in threat modeling methodologies, security architecture review, and risk assessment. Masters STRIDE, PASTA, attack trees, and security requirement ext... | threat, modeling | threat, modeling, methodologies, security, architecture, review, risk, assessment, masters, stride, pasta, attack | | `top-web-vulnerabilities` | Provide a comprehensive, structured reference for the 100 most critical web application vulnerabilities organized by category. This skill enables systematic ... | top, web, vulnerabilities | top, web, vulnerabilities, provide, structured, reference, 100, most, critical, application, organized, category | | `trust-calibrator` | One sentence - what this skill does and when to invoke it | trust, calibrator | trust, calibrator, one, sentence, what, skill, does, invoke | +| `ui-review` | Review UI code for StyleSeed design-system compliance, accessibility, mobile ergonomics, spacing discipline, and implementation quality. | ui, review, design-system, accessibility, styleseed | ui, review, design-system, accessibility, styleseed, code, compliance, mobile, ergonomics, spacing, discipline, quality | | `ui-visual-validator` | Rigorous visual validation expert specializing in UI testing, design system compliance, and accessibility verification. | ui, visual, validator | ui, visual, validator, rigorous, validation, specializing, testing, compliance, accessibility, verification | | `using-neon` | Neon is a serverless Postgres platform that separates compute and storage to offer autoscaling, branching, instant restore, and scale-to-zero. It's fully com... | using, neon | using, neon, serverless, postgres, platform, separates, compute, storage, offer, autoscaling, branching, instant | | `variant-analysis` | Find similar vulnerabilities and bugs across codebases using pattern-based analysis. Use when hunting bug variants, building CodeQL/Semgrep queries, analyzin... | variant | variant, analysis, find, similar, vulnerabilities, bugs, codebases, hunting, bug, variants, building, codeql | diff --git a/README.md b/README.md index 577cbd82..e57b9555 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,13 @@ - -# ๐ŸŒŒ Antigravity Awesome Skills: 1,381+ Agentic Skills for Claude Code, Gemini CLI, Cursor, Copilot & More + +# ๐ŸŒŒ Antigravity Awesome Skills: 1,392+ Agentic Skills for Claude Code, Gemini CLI, Cursor, Copilot & More -> **Installable GitHub library of 1,381+ agentic skills for Claude Code, Cursor, Codex CLI, Gemini CLI, Antigravity, and other AI coding assistants.** +> **Installable GitHub library of 1,392+ agentic skills for Claude Code, Cursor, Codex CLI, Gemini CLI, Antigravity, and other AI coding assistants.** Antigravity Awesome Skills is an installable GitHub library and npm installer for reusable `SKILL.md` playbooks. It is designed for Claude Code, Cursor, Codex CLI, Gemini CLI, Antigravity, Kiro, OpenCode, GitHub Copilot, and other AI coding assistants that benefit from structured operating instructions. Instead of collecting one-off prompt snippets, this repository gives you a searchable, installable catalog of skills, bundles, workflows, plugin-safe distributions, and practical docs that help agents perform recurring tasks with better context, stronger constraints, and clearer outputs. You can use this repo to install a broad multi-tool skill library, start from role-based bundles, or jump into workflow-driven execution for planning, coding, debugging, testing, security review, infrastructure, product work, and growth tasks. The root README is intentionally a high-signal landing page: understand what the project is, install it quickly, choose the right tool path, and then follow deeper docs only when you need them. -**Start here:** [Star the repo](https://github.com/sickn33/antigravity-awesome-skills/stargazers) ยท [Install in 1 minute](#installation) ยท [Choose your tool](#choose-your-tool) ยท [Best skills by tool](#best-skills-by-tool) ยท [๐Ÿ“š Browse 1,381+ Skills](#browse-1381-skills) ยท [Bundles](docs/users/bundles.md) ยท [Workflows](docs/users/workflows.md) ยท [Plugins for Claude Code and Codex](docs/users/plugins.md) +**Start here:** [Star the repo](https://github.com/sickn33/antigravity-awesome-skills/stargazers) ยท [Install in 1 minute](#installation) ยท [Choose your tool](#choose-your-tool) ยท [Best skills by tool](#best-skills-by-tool) ยท [๐Ÿ“š Browse 1,392+ Skills](#browse-1392-skills) ยท [Bundles](docs/users/bundles.md) ยท [Workflows](docs/users/workflows.md) ยท [Plugins for Claude Code and Codex](docs/users/plugins.md) [![GitHub stars](https://img.shields.io/badge/โญ%2031%2C000%2B%20Stars-gold?style=for-the-badge)](https://github.com/sickn33/antigravity-awesome-skills/stargazers) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE) @@ -28,7 +28,7 @@ You can use this repo to install a broad multi-tool skill library, start from ro - **Installable, not just inspirational**: use `npx antigravity-awesome-skills` to put skills where your tool expects them. - **Built for major agent workflows**: Claude Code, Cursor, Codex CLI, Gemini CLI, Antigravity, Kiro, OpenCode, Copilot, and more. -- **Broad coverage with real utility**: 1,381+ skills across development, testing, security, infrastructure, product, and marketing. +- **Broad coverage with real utility**: 1,392+ skills across development, testing, security, infrastructure, product, and marketing. - **Faster onboarding**: bundles and workflows reduce the time from "I found this repo" to "I used my first skill". - **Useful whether you want breadth or curation**: browse the full catalog, start with top bundles, or compare alternatives before installing. @@ -127,7 +127,7 @@ Start with [Bundles](docs/users/bundles.md) for role-based recommendations, [Wor ## Best Skills By Tool -If you want a faster answer than "browse all 1,381+ skills", start with a tool-specific guide: +If you want a faster answer than "browse all 1,392+ skills", start with a tool-specific guide: - **[Claude Code skills](docs/users/claude-code-skills.md)**: install paths, starter skills, prompt examples, and plugin marketplace flow. - **[Cursor skills](docs/users/cursor-skills.md)**: best starter skills for `.cursor/skills/`, UI-heavy work, and pair-programming flows. @@ -183,7 +183,7 @@ If Antigravity starts hitting context limits with too many active skills, the ac If you use OpenCode or another `.agents/skills` host, prefer a reduced install up front instead of copying the full library into a context-sensitive runtime. The installer now supports `--risk`, `--category`, and `--tags` so you can keep the installed set narrow. -## Browse 1,381+ Skills +## Browse 1,392+ Skills Use the root repo as a landing page, then jump into the deeper surface that matches your intent. diff --git a/apps/web-app/public/sitemap.xml b/apps/web-app/public/sitemap.xml index ed7d0a7a..9d9d8800 100644 --- a/apps/web-app/public/sitemap.xml +++ b/apps/web-app/public/sitemap.xml @@ -2,247 +2,247 @@ http://localhost/ - 2026-04-07 + 2026-04-08 daily 1.0 http://localhost/skill/multi-agent-task-orchestrator - 2026-04-07 + 2026-04-08 + weekly + 0.7 + + + http://localhost/skill/ui-a11y + 2026-04-08 + weekly + 0.7 + + + http://localhost/skill/ui-component + 2026-04-08 + weekly + 0.7 + + + http://localhost/skill/ui-page + 2026-04-08 + weekly + 0.7 + + + http://localhost/skill/ui-pattern + 2026-04-08 + weekly + 0.7 + + + http://localhost/skill/ui-review + 2026-04-08 + weekly + 0.7 + + + http://localhost/skill/ui-setup + 2026-04-08 + weekly + 0.7 + + + http://localhost/skill/ui-tokens + 2026-04-08 + weekly + 0.7 + + + http://localhost/skill/ux-audit + 2026-04-08 + weekly + 0.7 + + + http://localhost/skill/ux-copy + 2026-04-08 + weekly + 0.7 + + + http://localhost/skill/ux-feedback + 2026-04-08 + weekly + 0.7 + + + http://localhost/skill/ux-flow + 2026-04-08 weekly 0.7 http://localhost/skill/faf-expert - 2026-04-07 + 2026-04-08 weekly 0.7 http://localhost/skill/faf-wizard - 2026-04-07 + 2026-04-08 weekly 0.7 http://localhost/skill/idea-darwin - 2026-04-07 + 2026-04-08 weekly 0.7 http://localhost/skill/global-chat-agent-discovery - 2026-04-07 + 2026-04-08 weekly 0.7 http://localhost/skill/python-pptx-generator - 2026-04-07 + 2026-04-08 weekly 0.7 http://localhost/skill/satori - 2026-04-07 + 2026-04-08 weekly 0.7 http://localhost/skill/protect-mcp-governance - 2026-04-07 + 2026-04-08 weekly 0.7 http://localhost/skill/technical-change-tracker - 2026-04-07 + 2026-04-08 weekly 0.7 http://localhost/skill/awareness-stage-mapper - 2026-04-07 + 2026-04-08 weekly 0.7 http://localhost/skill/brand-perception-psychologist - 2026-04-07 + 2026-04-08 weekly 0.7 http://localhost/skill/copywriting-psychologist - 2026-04-07 + 2026-04-08 weekly 0.7 http://localhost/skill/customer-psychographic-profiler - 2026-04-07 + 2026-04-08 weekly 0.7 http://localhost/skill/emotional-arc-designer - 2026-04-07 + 2026-04-08 weekly 0.7 http://localhost/skill/headline-psychologist - 2026-04-07 + 2026-04-08 weekly 0.7 http://localhost/skill/identity-mirror - 2026-04-07 + 2026-04-08 weekly 0.7 http://localhost/skill/jobs-to-be-done-analyst - 2026-04-07 + 2026-04-08 weekly 0.7 http://localhost/skill/loss-aversion-designer - 2026-04-07 + 2026-04-08 weekly 0.7 http://localhost/skill/objection-preemptor - 2026-04-07 + 2026-04-08 weekly 0.7 http://localhost/skill/onboarding-psychologist - 2026-04-07 + 2026-04-08 weekly 0.7 http://localhost/skill/pitch-psychologist - 2026-04-07 + 2026-04-08 weekly 0.7 http://localhost/skill/price-psychology-strategist - 2026-04-07 + 2026-04-08 weekly 0.7 http://localhost/skill/scarcity-urgency-psychologist - 2026-04-07 + 2026-04-08 weekly 0.7 http://localhost/skill/sequence-psychologist - 2026-04-07 + 2026-04-08 weekly 0.7 http://localhost/skill/social-proof-architect - 2026-04-07 + 2026-04-08 weekly 0.7 http://localhost/skill/subject-line-psychologist - 2026-04-07 + 2026-04-08 weekly 0.7 http://localhost/skill/trust-calibrator - 2026-04-07 + 2026-04-08 weekly 0.7 http://localhost/skill/ux-persuasion-engineer - 2026-04-07 + 2026-04-08 weekly 0.7 http://localhost/skill/visual-emotion-engineer - 2026-04-07 - weekly - 0.7 - - - http://localhost/skill/humanize-chinese - 2026-04-07 - weekly - 0.7 - - - http://localhost/skill/uxui-principles - 2026-04-07 - weekly - 0.7 - - - http://localhost/skill/agentflow - 2026-04-07 - weekly - 0.7 - - - http://localhost/skill/seo-aeo-blog-writer - 2026-04-07 - weekly - 0.7 - - - http://localhost/skill/seo-aeo-content-cluster - 2026-04-07 - weekly - 0.7 - - - http://localhost/skill/seo-aeo-content-quality-auditor - 2026-04-07 - weekly - 0.7 - - - http://localhost/skill/seo-aeo-internal-linking - 2026-04-07 - weekly - 0.7 - - - http://localhost/skill/seo-aeo-keyword-research - 2026-04-07 - weekly - 0.7 - - - http://localhost/skill/seo-aeo-landing-page-writer - 2026-04-07 - weekly - 0.7 - - - http://localhost/skill/seo-aeo-meta-description-generator - 2026-04-07 - weekly - 0.7 - - - http://localhost/skill/seo-aeo-schema-generator - 2026-04-07 + 2026-04-08 weekly 0.7 diff --git a/apps/web-app/public/skills.json.backup b/apps/web-app/public/skills.json.backup index 4352f4f5..45cf497d 100644 --- a/apps/web-app/public/skills.json.backup +++ b/apps/web-app/public/skills.json.backup @@ -28262,6 +28262,138 @@ "reasons": [] } }, + { + "id": "ui-a11y", + "path": "skills/ui-a11y", + "category": "design", + "name": "ui-a11y", + "description": "Audit a StyleSeed-based component or page for WCAG 2.2 AA issues and apply practical accessibility fixes where the code makes them safe.", + "risk": "safe", + "source": "community", + "date_added": "2026-04-08", + "plugin": { + "targets": { + "codex": "supported", + "claude": "supported" + }, + "setup": { + "type": "none", + "summary": "", + "docs": null + }, + "reasons": [] + } + }, + { + "id": "ui-component", + "path": "skills/ui-component", + "category": "design", + "name": "ui-component", + "description": "Generate a new UI component that follows StyleSeed Toss conventions for structure, tokens, accessibility, and component ergonomics.", + "risk": "safe", + "source": "community", + "date_added": "2026-04-08", + "plugin": { + "targets": { + "codex": "supported", + "claude": "supported" + }, + "setup": { + "type": "none", + "summary": "", + "docs": null + }, + "reasons": [] + } + }, + { + "id": "ui-page", + "path": "skills/ui-page", + "category": "design", + "name": "ui-page", + "description": "Scaffold a new mobile-first page using StyleSeed Toss layout patterns, section rhythm, and existing shell components.", + "risk": "safe", + "source": "community", + "date_added": "2026-04-08", + "plugin": { + "targets": { + "codex": "supported", + "claude": "supported" + }, + "setup": { + "type": "none", + "summary": "", + "docs": null + }, + "reasons": [] + } + }, + { + "id": "ui-pattern", + "path": "skills/ui-pattern", + "category": "design", + "name": "ui-pattern", + "description": "Generate reusable UI patterns such as card sections, grids, lists, forms, and chart wrappers using StyleSeed Toss primitives.", + "risk": "safe", + "source": "community", + "date_added": "2026-04-08", + "plugin": { + "targets": { + "codex": "supported", + "claude": "supported" + }, + "setup": { + "type": "none", + "summary": "", + "docs": null + }, + "reasons": [] + } + }, + { + "id": "ui-review", + "path": "skills/ui-review", + "category": "design", + "name": "ui-review", + "description": "Review UI code for StyleSeed design-system compliance, accessibility, mobile ergonomics, spacing discipline, and implementation quality.", + "risk": "safe", + "source": "community", + "date_added": "2026-04-08", + "plugin": { + "targets": { + "codex": "supported", + "claude": "supported" + }, + "setup": { + "type": "none", + "summary": "", + "docs": null + }, + "reasons": [] + } + }, + { + "id": "ui-setup", + "path": "skills/ui-setup", + "category": "design", + "name": "ui-setup", + "description": "Interactive StyleSeed setup wizard for choosing app type, brand color, visual style, typography, and the first screen scaffold.", + "risk": "safe", + "source": "community", + "date_added": "2026-04-08", + "plugin": { + "targets": { + "codex": "supported", + "claude": "supported" + }, + "setup": { + "type": "none", + "summary": "", + "docs": null + }, + "reasons": [] + } + }, { "id": "ui-skills", "path": "skills/ui-skills", @@ -28284,6 +28416,28 @@ "reasons": [] } }, + { + "id": "ui-tokens", + "path": "skills/ui-tokens", + "category": "design", + "name": "ui-tokens", + "description": "List, add, and update StyleSeed design tokens while keeping JSON sources, CSS variables, and dark-mode values in sync.", + "risk": "safe", + "source": "community", + "date_added": "2026-04-08", + "plugin": { + "targets": { + "codex": "supported", + "claude": "supported" + }, + "setup": { + "type": "none", + "summary": "", + "docs": null + }, + "reasons": [] + } + }, { "id": "ui-ux-designer", "path": "skills/ui-ux-designer", @@ -28638,6 +28792,94 @@ "reasons": [] } }, + { + "id": "ux-audit", + "path": "skills/ux-audit", + "category": "design", + "name": "ux-audit", + "description": "Audit screens against Nielsen's heuristics and mobile UX best practices using the StyleSeed Toss design language as the implementation context.", + "risk": "safe", + "source": "community", + "date_added": "2026-04-08", + "plugin": { + "targets": { + "codex": "supported", + "claude": "supported" + }, + "setup": { + "type": "none", + "summary": "", + "docs": null + }, + "reasons": [] + } + }, + { + "id": "ux-copy", + "path": "skills/ux-copy", + "category": "design", + "name": "ux-copy", + "description": "Generate UX microcopy in StyleSeed's Toss-inspired voice for buttons, empty states, errors, toasts, confirmations, and form guidance.", + "risk": "safe", + "source": "community", + "date_added": "2026-04-08", + "plugin": { + "targets": { + "codex": "supported", + "claude": "supported" + }, + "setup": { + "type": "none", + "summary": "", + "docs": null + }, + "reasons": [] + } + }, + { + "id": "ux-feedback", + "path": "skills/ux-feedback", + "category": "design", + "name": "ux-feedback", + "description": "Add loading, empty, error, and success feedback states to StyleSeed components and pages with practical mobile-first rules.", + "risk": "safe", + "source": "community", + "date_added": "2026-04-08", + "plugin": { + "targets": { + "codex": "supported", + "claude": "supported" + }, + "setup": { + "type": "none", + "summary": "", + "docs": null + }, + "reasons": [] + } + }, + { + "id": "ux-flow", + "path": "skills/ux-flow", + "category": "design", + "name": "ux-flow", + "description": "Design user flows and screen structure using StyleSeed UX patterns such as progressive disclosure, hub-and-spoke navigation, and information pyramids.", + "risk": "safe", + "source": "community", + "date_added": "2026-04-08", + "plugin": { + "targets": { + "codex": "supported", + "claude": "supported" + }, + "setup": { + "type": "none", + "summary": "", + "docs": null + }, + "reasons": [] + } + }, { "id": "ux-persuasion-engineer", "path": "skills/ux-persuasion-engineer", diff --git a/data/bundles.json b/data/bundles.json index 4893e18a..7e02019e 100644 --- a/data/bundles.json +++ b/data/bundles.json @@ -308,9 +308,16 @@ "typescript-advanced-types", "typescript-expert", "typescript-pro", + "ui-component", + "ui-page", + "ui-review", + "ui-setup", "ui-ux-pro-max", "uniprot-database", "uv-package-manager", + "ux-audit", + "ux-copy", + "ux-feedback", "vercel-ai-sdk-expert", "viral-generator-builder", "voice-ai-development", @@ -457,6 +464,7 @@ "threat-mitigation-mapping", "threat-modeling-expert", "top-web-vulnerabilities", + "ui-review", "ui-visual-validator", "variant-analysis", "varlock-claude-skill", @@ -1191,8 +1199,12 @@ "swiftui-performance-audit", "swiftui-ui-patterns", "swiftui-view-refactor", + "ui-page", + "ui-review", "ui-ux-pro-max", - "upgrading-expo" + "upgrading-expo", + "ux-audit", + "ux-feedback" ] }, "seo-core": { diff --git a/data/catalog.json b/data/catalog.json index 647723a5..c26e9cdd 100644 --- a/data/catalog.json +++ b/data/catalog.json @@ -1,6 +1,6 @@ { "generatedAt": "2026-02-08T00:00:00.000Z", - "total": 1381, + "total": 1392, "skills": [ { "id": "00-andruia-consultant", @@ -31547,6 +31547,174 @@ ], "path": "skills/typescript-pro/SKILL.md" }, + { + "id": "ui-a11y", + "name": "ui-a11y", + "description": "Audit a StyleSeed-based component or page for WCAG 2.2 AA issues and apply practical accessibility fixes where the code makes them safe.", + "category": "general", + "tags": [ + "ui", + "accessibility", + "wcag", + "audit", + "styleseed" + ], + "triggers": [ + "ui", + "accessibility", + "wcag", + "audit", + "styleseed", + "a11y", + "component", + "page", + "aa", + "issues", + "apply", + "practical" + ], + "path": "skills/ui-a11y/SKILL.md" + }, + { + "id": "ui-component", + "name": "ui-component", + "description": "Generate a new UI component that follows StyleSeed Toss conventions for structure, tokens, accessibility, and component ergonomics.", + "category": "development", + "tags": [ + "ui", + "components", + "design-system", + "frontend", + "styleseed" + ], + "triggers": [ + "ui", + "components", + "design-system", + "frontend", + "styleseed", + "component", + "generate", + "new", + "follows", + "toss", + "conventions", + "structure" + ], + "path": "skills/ui-component/SKILL.md" + }, + { + "id": "ui-page", + "name": "ui-page", + "description": "Scaffold a new mobile-first page using StyleSeed Toss layout patterns, section rhythm, and existing shell components.", + "category": "development", + "tags": [ + "ui", + "page-design", + "mobile", + "layout", + "styleseed" + ], + "triggers": [ + "ui", + "page-design", + "mobile", + "layout", + "styleseed", + "page", + "scaffold", + "new", + "first", + "toss", + "section", + "rhythm" + ], + "path": "skills/ui-page/SKILL.md" + }, + { + "id": "ui-pattern", + "name": "ui-pattern", + "description": "Generate reusable UI patterns such as card sections, grids, lists, forms, and chart wrappers using StyleSeed Toss primitives.", + "category": "architecture", + "tags": [ + "ui", + "patterns", + "design-system", + "reuse", + "styleseed" + ], + "triggers": [ + "ui", + "patterns", + "design-system", + "reuse", + "styleseed", + "generate", + "reusable", + "such", + "card", + "sections", + "grids", + "lists" + ], + "path": "skills/ui-pattern/SKILL.md" + }, + { + "id": "ui-review", + "name": "ui-review", + "description": "Review UI code for StyleSeed design-system compliance, accessibility, mobile ergonomics, spacing discipline, and implementation quality.", + "category": "security", + "tags": [ + "ui", + "review", + "design-system", + "accessibility", + "styleseed" + ], + "triggers": [ + "ui", + "review", + "design-system", + "accessibility", + "styleseed", + "code", + "compliance", + "mobile", + "ergonomics", + "spacing", + "discipline", + "quality" + ], + "path": "skills/ui-review/SKILL.md" + }, + { + "id": "ui-setup", + "name": "ui-setup", + "description": "Interactive StyleSeed setup wizard for choosing app type, brand color, visual style, typography, and the first screen scaffold.", + "category": "development", + "tags": [ + "ui", + "design-system", + "setup", + "frontend", + "styleseed" + ], + "triggers": [ + "ui", + "design-system", + "setup", + "frontend", + "styleseed", + "interactive", + "wizard", + "choosing", + "app", + "type", + "brand", + "color" + ], + "path": "skills/ui-setup/SKILL.md" + }, { "id": "ui-skills", "name": "ui-skills", @@ -31568,6 +31736,34 @@ ], "path": "skills/ui-skills/SKILL.md" }, + { + "id": "ui-tokens", + "name": "ui-tokens", + "description": "List, add, and update StyleSeed design tokens while keeping JSON sources, CSS variables, and dark-mode values in sync.", + "category": "general", + "tags": [ + "ui", + "tokens", + "design-system", + "theming", + "styleseed" + ], + "triggers": [ + "ui", + "tokens", + "design-system", + "theming", + "styleseed", + "list", + "add", + "update", + "while", + "keeping", + "json", + "sources" + ], + "path": "skills/ui-tokens/SKILL.md" + }, { "id": "ui-ux-designer", "name": "ui-ux-designer", @@ -31960,6 +32156,118 @@ ], "path": "skills/uv-package-manager/SKILL.md" }, + { + "id": "ux-audit", + "name": "ux-audit", + "description": "Audit screens against Nielsen's heuristics and mobile UX best practices using the StyleSeed Toss design language as the implementation context.", + "category": "development", + "tags": [ + "ux", + "audit", + "usability", + "mobile", + "styleseed" + ], + "triggers": [ + "ux", + "audit", + "usability", + "mobile", + "styleseed", + "screens", + "against", + "nielsen", + "heuristics", + "toss", + "language", + "context" + ], + "path": "skills/ux-audit/SKILL.md" + }, + { + "id": "ux-copy", + "name": "ux-copy", + "description": "Generate UX microcopy in StyleSeed's Toss-inspired voice for buttons, empty states, errors, toasts, confirmations, and form guidance.", + "category": "development", + "tags": [ + "ux", + "copywriting", + "microcopy", + "frontend", + "styleseed" + ], + "triggers": [ + "ux", + "copywriting", + "microcopy", + "frontend", + "styleseed", + "copy", + "generate", + "toss", + "inspired", + "voice", + "buttons", + "empty" + ], + "path": "skills/ux-copy/SKILL.md" + }, + { + "id": "ux-feedback", + "name": "ux-feedback", + "description": "Add loading, empty, error, and success feedback states to StyleSeed components and pages with practical mobile-first rules.", + "category": "development", + "tags": [ + "ux", + "states", + "loading", + "error-handling", + "styleseed" + ], + "triggers": [ + "ux", + "states", + "loading", + "error-handling", + "styleseed", + "feedback", + "add", + "empty", + "error", + "success", + "components", + "pages" + ], + "path": "skills/ux-feedback/SKILL.md" + }, + { + "id": "ux-flow", + "name": "ux-flow", + "description": "Design user flows and screen structure using StyleSeed UX patterns such as progressive disclosure, hub-and-spoke navigation, and information pyramids.", + "category": "architecture", + "tags": [ + "ux", + "flows", + "navigation", + "product-design", + "styleseed" + ], + "triggers": [ + "ux", + "flows", + "navigation", + "product-design", + "styleseed", + "flow", + "user", + "screen", + "structure", + "such", + "progressive", + "disclosure" + ], + "path": "skills/ux-flow/SKILL.md" + }, { "id": "ux-persuasion-engineer", "name": "ux-persuasion-engineer", diff --git a/data/plugin-compatibility.json b/data/plugin-compatibility.json index 17bf249b..e84f1136 100644 --- a/data/plugin-compatibility.json +++ b/data/plugin-compatibility.json @@ -24565,6 +24565,120 @@ }, "runtime_files": [] }, + { + "id": "ui-a11y", + "path": "skills/ui-a11y", + "targets": { + "codex": "supported", + "claude": "supported" + }, + "setup": { + "type": "none", + "summary": "", + "docs": null + }, + "reasons": [], + "blocked_reasons": { + "codex": [], + "claude": [] + }, + "runtime_files": [] + }, + { + "id": "ui-component", + "path": "skills/ui-component", + "targets": { + "codex": "supported", + "claude": "supported" + }, + "setup": { + "type": "none", + "summary": "", + "docs": null + }, + "reasons": [], + "blocked_reasons": { + "codex": [], + "claude": [] + }, + "runtime_files": [] + }, + { + "id": "ui-page", + "path": "skills/ui-page", + "targets": { + "codex": "supported", + "claude": "supported" + }, + "setup": { + "type": "none", + "summary": "", + "docs": null + }, + "reasons": [], + "blocked_reasons": { + "codex": [], + "claude": [] + }, + "runtime_files": [] + }, + { + "id": "ui-pattern", + "path": "skills/ui-pattern", + "targets": { + "codex": "supported", + "claude": "supported" + }, + "setup": { + "type": "none", + "summary": "", + "docs": null + }, + "reasons": [], + "blocked_reasons": { + "codex": [], + "claude": [] + }, + "runtime_files": [] + }, + { + "id": "ui-review", + "path": "skills/ui-review", + "targets": { + "codex": "supported", + "claude": "supported" + }, + "setup": { + "type": "none", + "summary": "", + "docs": null + }, + "reasons": [], + "blocked_reasons": { + "codex": [], + "claude": [] + }, + "runtime_files": [] + }, + { + "id": "ui-setup", + "path": "skills/ui-setup", + "targets": { + "codex": "supported", + "claude": "supported" + }, + "setup": { + "type": "none", + "summary": "", + "docs": null + }, + "reasons": [], + "blocked_reasons": { + "codex": [], + "claude": [] + }, + "runtime_files": [] + }, { "id": "ui-skills", "path": "skills/ui-skills", @@ -24584,6 +24698,25 @@ }, "runtime_files": [] }, + { + "id": "ui-tokens", + "path": "skills/ui-tokens", + "targets": { + "codex": "supported", + "claude": "supported" + }, + "setup": { + "type": "none", + "summary": "", + "docs": null + }, + "reasons": [], + "blocked_reasons": { + "codex": [], + "claude": [] + }, + "runtime_files": [] + }, { "id": "ui-ux-designer", "path": "skills/ui-ux-designer", @@ -24894,6 +25027,82 @@ }, "runtime_files": [] }, + { + "id": "ux-audit", + "path": "skills/ux-audit", + "targets": { + "codex": "supported", + "claude": "supported" + }, + "setup": { + "type": "none", + "summary": "", + "docs": null + }, + "reasons": [], + "blocked_reasons": { + "codex": [], + "claude": [] + }, + "runtime_files": [] + }, + { + "id": "ux-copy", + "path": "skills/ux-copy", + "targets": { + "codex": "supported", + "claude": "supported" + }, + "setup": { + "type": "none", + "summary": "", + "docs": null + }, + "reasons": [], + "blocked_reasons": { + "codex": [], + "claude": [] + }, + "runtime_files": [] + }, + { + "id": "ux-feedback", + "path": "skills/ux-feedback", + "targets": { + "codex": "supported", + "claude": "supported" + }, + "setup": { + "type": "none", + "summary": "", + "docs": null + }, + "reasons": [], + "blocked_reasons": { + "codex": [], + "claude": [] + }, + "runtime_files": [] + }, + { + "id": "ux-flow", + "path": "skills/ux-flow", + "targets": { + "codex": "supported", + "claude": "supported" + }, + "setup": { + "type": "none", + "summary": "", + "docs": null + }, + "reasons": [], + "blocked_reasons": { + "codex": [], + "claude": [] + }, + "runtime_files": [] + }, { "id": "ux-persuasion-engineer", "path": "skills/ux-persuasion-engineer", @@ -26401,10 +26610,10 @@ } ], "summary": { - "total_skills": 1381, + "total_skills": 1392, "supported": { - "codex": 1352, - "claude": 1367 + "codex": 1363, + "claude": 1378 }, "blocked": { "codex": 29, diff --git a/docs/integrations/jetski-cortex.md b/docs/integrations/jetski-cortex.md index 2aa1937f..454f4fd6 100644 --- a/docs/integrations/jetski-cortex.md +++ b/docs/integrations/jetski-cortex.md @@ -1,9 +1,9 @@ --- title: Jetski/Cortex + Gemini Integration Guide -description: "Use antigravity-awesome-skills with Jetski/Cortex without hitting context-window overflow with 1.381+ skills." +description: "Use antigravity-awesome-skills with Jetski/Cortex without hitting context-window overflow with 1.392+ skills." --- -# Jetski/Cortex + Gemini: safe integration with 1,1.381+ skills +# Jetski/Cortex + Gemini: safe integration with 1,1.392+ skills This guide shows how to integrate the `antigravity-awesome-skills` repository with an agent based on **Jetski/Cortex + Gemini** (or similar frameworks) **without exceeding the model context window**. @@ -23,7 +23,7 @@ Never do: - concatenate all `SKILL.md` content into a single system prompt; - re-inject the entire library for **every** request. -With over 1,1.381 skills, this approach fills the context window before user messages are even added, causing truncation. +With over 1,1.392 skills, this approach fills the context window before user messages are even added, causing truncation. --- diff --git a/docs/integrations/jetski-gemini-loader/README.md b/docs/integrations/jetski-gemini-loader/README.md index 00fc896b..47e6654a 100644 --- a/docs/integrations/jetski-gemini-loader/README.md +++ b/docs/integrations/jetski-gemini-loader/README.md @@ -20,7 +20,7 @@ This example shows one way to integrate **antigravity-awesome-skills** with a Je - How to enforce a **maximum number of skills per turn** via `maxSkillsPerTurn`. - How to choose whether to **truncate or error** when too many skills are requested via `overflowBehavior`. -This pattern avoids context overflow when you have 1,381+ skills installed. +This pattern avoids context overflow when you have 1,392+ skills installed. --- diff --git a/docs/maintainers/repo-growth-seo.md b/docs/maintainers/repo-growth-seo.md index eb296f7b..e18a21c6 100644 --- a/docs/maintainers/repo-growth-seo.md +++ b/docs/maintainers/repo-growth-seo.md @@ -6,7 +6,7 @@ This document keeps the repository's GitHub-facing discovery copy aligned with t Preferred positioning: -> Installable GitHub library of 1,381+ agentic skills for Claude Code, Cursor, Codex CLI, Gemini CLI, Antigravity, and other AI coding assistants. +> Installable GitHub library of 1,392+ agentic skills for Claude Code, Cursor, Codex CLI, Gemini CLI, Antigravity, and other AI coding assistants. Key framing: @@ -20,7 +20,7 @@ Key framing: Preferred description: -> Installable GitHub library of 1,381+ agentic skills for Claude Code, Cursor, Codex CLI, Gemini CLI, Antigravity, and more. Includes installer CLI, bundles, workflows, and official/community skill collections. +> Installable GitHub library of 1,392+ agentic skills for Claude Code, Cursor, Codex CLI, Gemini CLI, Antigravity, and more. Includes installer CLI, bundles, workflows, and official/community skill collections. Preferred homepage: @@ -28,7 +28,7 @@ Preferred homepage: Preferred social preview: -- use a clean preview image that says `1,381+ Agentic Skills`; +- use a clean preview image that says `1,392+ Agentic Skills`; - mention Claude Code, Cursor, Codex CLI, and Gemini CLI; - avoid dense text and tiny logos that disappear in social cards. diff --git a/docs/maintainers/skills-update-guide.md b/docs/maintainers/skills-update-guide.md index 553a203a..e554db2b 100644 --- a/docs/maintainers/skills-update-guide.md +++ b/docs/maintainers/skills-update-guide.md @@ -69,7 +69,7 @@ For manual updates, you need: The update process refreshes: - Skills index (`skills_index.json`) - Web app skills data (`apps\web-app\public\skills.json`) -- All 1,381+ skills from the skills directory +- All 1,392+ skills from the skills directory ## When to Update diff --git a/docs/users/bundles.md b/docs/users/bundles.md index f3975d58..35636e4d 100644 --- a/docs/users/bundles.md +++ b/docs/users/bundles.md @@ -673,4 +673,4 @@ Found a skill that should be in a bundle? Or want to create a new bundle? [Open --- -_Last updated: March 2026 | Total Skills: 1,381+ | Total Bundles: 37_ +_Last updated: March 2026 | Total Skills: 1,392+ | Total Bundles: 37_ diff --git a/docs/users/claude-code-skills.md b/docs/users/claude-code-skills.md index da5e7248..ae1fe18e 100644 --- a/docs/users/claude-code-skills.md +++ b/docs/users/claude-code-skills.md @@ -12,7 +12,7 @@ Install the library into Claude Code, then invoke focused skills directly in the ## Why use this repo for Claude Code -- It includes 1,381+ skills instead of a narrow single-domain starter pack. +- It includes 1,392+ skills instead of a narrow single-domain starter pack. - It supports the standard `.claude/skills/` path and the Claude Code plugin marketplace flow. - It also ships generated bundle plugins so teams can install focused packs like `Essentials` or `Security Developer` from the marketplace metadata. - It includes onboarding docs, bundles, and workflows so new users do not need to guess where to begin. diff --git a/docs/users/gemini-cli-skills.md b/docs/users/gemini-cli-skills.md index 6e3dfb12..b26dd65e 100644 --- a/docs/users/gemini-cli-skills.md +++ b/docs/users/gemini-cli-skills.md @@ -12,7 +12,7 @@ Install into the Gemini skills path, then ask Gemini to apply one skill at a tim - It installs directly into the expected Gemini skills path. - It includes both core software engineering skills and deeper agent/LLM-oriented skills. -- It helps new users get started with bundles and workflows rather than forcing a cold start from 1,381+ files. +- It helps new users get started with bundles and workflows rather than forcing a cold start from 1,392+ files. - It is useful whether you want a broad internal skill library or a single repo to test many workflows quickly. ## Install Gemini CLI Skills diff --git a/docs/users/kiro-integration.md b/docs/users/kiro-integration.md index 585c782c..2e2a9643 100644 --- a/docs/users/kiro-integration.md +++ b/docs/users/kiro-integration.md @@ -18,7 +18,7 @@ Kiro is AWS's agentic AI IDE that combines: Kiro's agentic capabilities are enhanced by skills that provide: -- **Domain expertise** across 1,381+ specialized areas +- **Domain expertise** across 1,392+ specialized areas - **Best practices** from Anthropic, OpenAI, Google, Microsoft, and AWS - **Workflow automation** for common development tasks - **AWS-specific patterns** for serverless, infrastructure, and cloud architecture diff --git a/docs/users/usage.md b/docs/users/usage.md index 8f59d845..69908460 100644 --- a/docs/users/usage.md +++ b/docs/users/usage.md @@ -14,7 +14,7 @@ If you came in through a **Claude Code** or **Codex** plugin instead of a full l When you ran `npx antigravity-awesome-skills` or cloned the repository, you: -โœ… **Downloaded 1,381+ skill files** to your computer (default: `~/.gemini/antigravity/skills/`; or a custom path like `~/.agent/skills/` if you used `--path`) +โœ… **Downloaded 1,392+ skill files** to your computer (default: `~/.gemini/antigravity/skills/`; or a custom path like `~/.agent/skills/` if you used `--path`) โœ… **Made them available** to your AI assistant โŒ **Did NOT enable them all automatically** (they're just sitting there, waiting) @@ -34,7 +34,7 @@ Bundles are **curated groups** of skills organized by role. They help you decide **Analogy:** -- You installed a toolbox with 1,381+ tools (โœ… done) +- You installed a toolbox with 1,392+ tools (โœ… done) - Bundles are like **labeled organizer trays** saying: "If you're a carpenter, start with these 10 tools" - You can either **pick skills from the tray** or install that tray as a focused marketplace bundle plugin @@ -212,7 +212,7 @@ Let's actually use a skill right now. Follow these steps: ## Step 5: Picking Your First Skills (Practical Advice) -Don't try to use all 1,381+ skills at once. Here's a sensible approach: +Don't try to use all 1,392+ skills at once. Here's a sensible approach: If you want a tool-specific starting point before choosing skills, use: @@ -343,7 +343,7 @@ Usually no, but if your AI doesn't recognize a skill: ### "Can I load all skills into the model at once?" -No. Even though you have 1,381+ skills installed locally, you should **not** concatenate every `SKILL.md` into a single system prompt or context block. +No. Even though you have 1,392+ skills installed locally, you should **not** concatenate every `SKILL.md` into a single system prompt or context block. The intended pattern is: diff --git a/docs/users/visual-guide.md b/docs/users/visual-guide.md index f06fd0c5..94d8170a 100644 --- a/docs/users/visual-guide.md +++ b/docs/users/visual-guide.md @@ -34,7 +34,7 @@ antigravity-awesome-skills/ โ”œโ”€โ”€ ๐Ÿ“„ CONTRIBUTING.md โ† Contributor workflow โ”œโ”€โ”€ ๐Ÿ“„ CATALOG.md โ† Full generated catalog โ”‚ -โ”œโ”€โ”€ ๐Ÿ“ skills/ โ† 1,381+ skills live here +โ”œโ”€โ”€ ๐Ÿ“ skills/ โ† 1,392+ skills live here โ”‚ โ”‚ โ”‚ โ”œโ”€โ”€ ๐Ÿ“ brainstorming/ โ”‚ โ”‚ โ””โ”€โ”€ ๐Ÿ“„ SKILL.md โ† Skill definition @@ -47,7 +47,7 @@ antigravity-awesome-skills/ โ”‚ โ”‚ โ””โ”€โ”€ ๐Ÿ“ 2d-games/ โ”‚ โ”‚ โ””โ”€โ”€ ๐Ÿ“„ SKILL.md โ† Nested skills also supported โ”‚ โ”‚ -โ”‚ โ””โ”€โ”€ ... (1,381+ total) +โ”‚ โ””โ”€โ”€ ... (1,392+ total) โ”‚ โ”œโ”€โ”€ ๐Ÿ“ apps/ โ”‚ โ””โ”€โ”€ ๐Ÿ“ web-app/ โ† Interactive browser @@ -100,7 +100,7 @@ antigravity-awesome-skills/ ``` โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” - โ”‚ 1,381+ SKILLS โ”‚ + โ”‚ 1,392+ SKILLS โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ฌโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ โ”‚ โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ผโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ” @@ -201,7 +201,7 @@ If you want a workspace-style manual install instead, cloning into `.agent/skill โ”‚ โ”œโ”€โ”€ ๐Ÿ“ brainstorming/ โ”‚ โ”‚ โ”œโ”€โ”€ ๐Ÿ“ stripe-integration/ โ”‚ โ”‚ โ”œโ”€โ”€ ๐Ÿ“ react-best-practices/ โ”‚ -โ”‚ โ””โ”€โ”€ ... (1,381+ total) โ”‚ +โ”‚ โ””โ”€โ”€ ... (1,392+ total) โ”‚ โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜ ``` diff --git a/package.json b/package.json index df87601e..1b217798 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "antigravity-awesome-skills", "version": "9.9.0", - "description": "1,381+ agentic skills for Claude Code, Gemini CLI, Cursor, Antigravity & more. Installer CLI.", + "description": "1,392+ agentic skills for Claude Code, Gemini CLI, Cursor, Antigravity & more. Installer CLI.", "license": "MIT", "scripts": { "validate": "node tools/scripts/run-python.js tools/scripts/validate_skills.py", diff --git a/plugins/antigravity-awesome-skills-claude/.claude-plugin/plugin.json b/plugins/antigravity-awesome-skills-claude/.claude-plugin/plugin.json index 6d3bf9c8..621678af 100644 --- a/plugins/antigravity-awesome-skills-claude/.claude-plugin/plugin.json +++ b/plugins/antigravity-awesome-skills-claude/.claude-plugin/plugin.json @@ -1,7 +1,7 @@ { "name": "antigravity-awesome-skills", "version": "9.9.0", - "description": "Plugin-safe Claude Code distribution of Antigravity Awesome Skills with 1,367 supported skills.", + "description": "Plugin-safe Claude Code distribution of Antigravity Awesome Skills with 1,378 supported skills.", "author": { "name": "sickn33 and contributors", "url": "https://github.com/sickn33/antigravity-awesome-skills" diff --git a/plugins/antigravity-awesome-skills-claude/skills/ui-a11y/SKILL.md b/plugins/antigravity-awesome-skills-claude/skills/ui-a11y/SKILL.md new file mode 100644 index 00000000..4a2482df --- /dev/null +++ b/plugins/antigravity-awesome-skills-claude/skills/ui-a11y/SKILL.md @@ -0,0 +1,77 @@ +--- +name: ui-a11y +description: "Audit a StyleSeed-based component or page for WCAG 2.2 AA issues and apply practical accessibility fixes where the code makes them safe." +category: design +risk: safe +source: community +source_repo: bitjaru/styleseed +source_type: community +date_added: "2026-04-08" +author: bitjaru +tags: [ui, accessibility, wcag, audit, styleseed] +tools: [claude, cursor, codex, gemini] +--- + +# UI Accessibility Audit + +## Overview + +Part of [StyleSeed](https://github.com/bitjaru/styleseed), this skill audits components and pages for accessibility issues with an emphasis on the Toss seed's mobile UI patterns. It combines WCAG 2.2 AA checks with practical code fixes for touch targets, focus states, contrast, labels, and reduced motion. + +## When to Use + +- Use when reviewing a page or component for accessibility regressions +- Use when a StyleSeed UI looks polished but has uncertain keyboard or contrast behavior +- Use when adding new interactive controls to a mobile-first screen +- Use when you want a prioritized list of issues and fixable items + +## Audit Areas + +### Perceivable + +- text contrast +- non-text contrast for controls and graphics +- alt text for images +- labels for meaningful icons +- no information conveyed by color alone + +### Operable + +- touch targets at least 44x44px +- keyboard reachability for all interactive controls +- logical tab order +- visible focus indicators +- reduced-motion support for nonessential animation + +### Understandable + +- visible labels or `aria-label` on inputs +- error text associated with the correct field +- clear wording for errors and validation +- document language set appropriately + +### Robust + +- semantic HTML where possible +- correct use of ARIA when semantics alone are insufficient +- no faux buttons or links without the right roles and behavior + +## Output + +Return: +1. Issues found, grouped by severity +2. Safe autofixes that can be applied directly +3. Items that need manual review or product judgment +4. A short summary of the accessibility risk level + +## Best Practices + +- Fix semantics before layering on ARIA +- Use the design system tokens only if they still meet contrast requirements +- Treat touch target failures as real usability defects, not polish issues +- Prefer partial, verified fixes over speculative accessibility changes + +## Additional Resources + +- [StyleSeed repository](https://github.com/bitjaru/styleseed) +- [Source skill](https://github.com/bitjaru/styleseed/blob/main/seeds/toss/.claude/skills/ui-a11y/SKILL.md) diff --git a/plugins/antigravity-awesome-skills-claude/skills/ui-component/SKILL.md b/plugins/antigravity-awesome-skills-claude/skills/ui-component/SKILL.md new file mode 100644 index 00000000..91b99db8 --- /dev/null +++ b/plugins/antigravity-awesome-skills-claude/skills/ui-component/SKILL.md @@ -0,0 +1,100 @@ +--- +name: ui-component +description: "Generate a new UI component that follows StyleSeed Toss conventions for structure, tokens, accessibility, and component ergonomics." +category: design +risk: safe +source: community +source_repo: bitjaru/styleseed +source_type: community +date_added: "2026-04-08" +author: bitjaru +tags: [ui, components, design-system, frontend, styleseed] +tools: [claude, cursor, codex, gemini] +--- + +# UI Component + +## Overview + +Part of [StyleSeed](https://github.com/bitjaru/styleseed), this skill generates components that respect the Toss seed's design language instead of improvising ad hoc markup and styling. It emphasizes semantic tokens, predictable typing, reusable variants, and mobile-friendly accessibility defaults. + +## When to Use + +- Use when you need a new UI primitive or composed component inside a StyleSeed-based project +- Use when you want a component to match the existing Toss seed conventions +- Use when a component should be reusable, typed, and design-token driven +- Use when the AI might otherwise invent spacing, colors, or interaction patterns + +## How It Works + +### Step 1: Read the Local Design Context + +Before generating code, inspect the seed's source of truth: +- `CLAUDE.md` for conventions +- `css/theme.css` for semantic tokens +- at least one representative component from `components/ui/` + +If the user already has a better local example, follow the local codebase over a generic template. + +### Step 2: Choose the Correct Home + +Place the output where it belongs: +- `src/components/ui/` for primitives and low-level building blocks +- `src/components/patterns/` for composed sections or multi-part patterns + +Do not create a new primitive if an existing one can be extended safely. + +### Step 3: Follow the Structural Rules + +Use these defaults unless the host project strongly disagrees: +- function declaration instead of a `const` component +- `React.ComponentProps<>` or equivalent native prop typing +- `className` passthrough support +- `cn()` or the project's standard class merger +- `data-slot` for component identification +- CVA or equivalent only when variants are genuinely needed + +### Step 4: Use Semantic Tokens Only + +Do not hardcode visual values if the design system has a token for them. + +Preferred examples: +- `bg-card` +- `text-foreground` +- `text-muted-foreground` +- `border-border` +- `shadow-[var(--shadow-card)]` + +### Step 5: Preserve StyleSeed Typography and Spacing + +- Use the scale already defined by the seed +- Prefer multiples of 6px +- Use logical spacing utilities where supported +- Keep display and heading text tight, body text readable, captions restrained + +### Step 6: Bake in Accessibility + +- Touch targets should be at least 44x44px for interactive elements +- Keyboard focus must be visible +- Pass through `aria-*` attributes where appropriate +- Respect reduced-motion preferences for nonessential motion + +## Output + +Provide: +1. The generated component +2. The target path +3. Any required imports or dependencies +4. Notes on variants, tokens, or follow-up integration work + +## Best Practices + +- Compose from existing primitives before inventing new ones +- Keep the component API small and predictable +- Prefer semantic layout classes over arbitrary values +- Export named components unless the host project uses another standard consistently + +## Additional Resources + +- [StyleSeed repository](https://github.com/bitjaru/styleseed) +- [Source skill](https://github.com/bitjaru/styleseed/blob/main/seeds/toss/.claude/skills/ui-component/SKILL.md) diff --git a/plugins/antigravity-awesome-skills-claude/skills/ui-page/SKILL.md b/plugins/antigravity-awesome-skills-claude/skills/ui-page/SKILL.md new file mode 100644 index 00000000..e8da4e8c --- /dev/null +++ b/plugins/antigravity-awesome-skills-claude/skills/ui-page/SKILL.md @@ -0,0 +1,96 @@ +--- +name: ui-page +description: "Scaffold a new mobile-first page using StyleSeed Toss layout patterns, section rhythm, and existing shell components." +category: design +risk: safe +source: community +source_repo: bitjaru/styleseed +source_type: community +date_added: "2026-04-08" +author: bitjaru +tags: [ui, page-design, mobile, layout, styleseed] +tools: [claude, cursor, codex, gemini] +--- + +# UI Page + +## Overview + +Part of [StyleSeed](https://github.com/bitjaru/styleseed), this skill scaffolds a complete page or screen using the Toss seed's mobile-first composition rules. It keeps page structure consistent by building on the existing shell, top bar, bottom navigation, and card rhythm instead of producing disconnected sections. + +## When to Use + +- Use when you need a new page in a Toss-seed app +- Use when you want a consistent page shell, spacing, and navigation structure +- Use when you are adding a new product flow and need a solid starting layout +- Use when you want to stay mobile-first even if the project later expands to larger breakpoints + +## How It Works + +### Step 1: Inspect the Existing Shell + +Read the current page scaffolding patterns first, especially: +- page shell +- top bar +- bottom navigation +- representative pages using the same route family + +### Step 2: Define the Page Purpose + +Clarify: +- the page name +- the primary user question the screen answers +- the top one or two actions the user should take + +Every screen should have one dominant purpose. + +### Step 3: Use the Information Pyramid + +Lay out the page from highest importance to lowest: +1. Hero or top summary +2. KPI or key actions +3. detail cards or supporting modules +4. lists, history, or secondary content + +Avoid repeating the same section type mechanically from top to bottom. + +### Step 4: Apply the Toss Layout Rules + +Default layout choices: +- mobile viewport width around `max-w-[430px]` +- page background on `bg-background` +- horizontal padding around `px-6` +- section rhythm with `space-y-6` +- generous bottom padding if a bottom nav is present +- cards using semantic surface tokens, rounded corners, and light shadows + +### Step 5: Compose Instead of Rebuilding + +Use existing `ui/` and `patterns/` components wherever possible. New pages should primarily orchestrate existing building blocks, not recreate them. + +### Step 6: Account for Real Device Constraints + +- handle safe-area insets +- avoid horizontal overflow +- keep interactive clusters thumb-friendly +- ensure long content scrolls cleanly without clipping the bottom navigation + +## Output + +Return: +1. The page scaffold +2. The chosen section structure +3. Reused components and any newly required components +4. Empty, loading, and error states that the page will need next + +## Best Practices + +- Keep the first version structurally correct before adding decoration +- Use one strong hero instead of multiple competing highlights +- Preserve navigation consistency across sibling screens +- Prefer reusable section components when the page will likely repeat + +## Additional Resources + +- [StyleSeed repository](https://github.com/bitjaru/styleseed) +- [Source skill](https://github.com/bitjaru/styleseed/blob/main/seeds/toss/.claude/skills/ui-page/SKILL.md) diff --git a/plugins/antigravity-awesome-skills-claude/skills/ui-pattern/SKILL.md b/plugins/antigravity-awesome-skills-claude/skills/ui-pattern/SKILL.md new file mode 100644 index 00000000..1fa05ba9 --- /dev/null +++ b/plugins/antigravity-awesome-skills-claude/skills/ui-pattern/SKILL.md @@ -0,0 +1,88 @@ +--- +name: ui-pattern +description: "Generate reusable UI patterns such as card sections, grids, lists, forms, and chart wrappers using StyleSeed Toss primitives." +category: design +risk: safe +source: community +source_repo: bitjaru/styleseed +source_type: community +date_added: "2026-04-08" +author: bitjaru +tags: [ui, patterns, design-system, reuse, styleseed] +tools: [claude, cursor, codex, gemini] +--- + +# UI Pattern + +## Overview + +Part of [StyleSeed](https://github.com/bitjaru/styleseed), this skill builds reusable composed patterns from the seed's primitives. It is intended for sections like card lists, grids, form blocks, ranking lists, and chart wrappers that appear across multiple pages and need to look deliberate rather than ad hoc. + +## When to Use + +- Use when you need a reusable layout pattern rather than a one-off page section +- Use when a page repeats the same arrangement of cards, rows, filters, or data blocks +- Use when you want to build from existing StyleSeed primitives instead of copying markup +- Use when you want a pattern component with props for dynamic content + +## How It Works + +### Step 1: Identify the Pattern Type + +Common pattern families include: +- card section +- two-column grid +- horizontal scroller +- list section +- form section +- stat grid +- data table +- detail card +- chart card +- filter bar +- action sheet + +### Step 2: Read the Available Building Blocks + +Inspect both: +- `components/ui/` for primitives +- `components/patterns/` for neighboring patterns that can be extended + +The goal is composition, not duplication. + +### Step 3: Apply StyleSeed Layout Rules + +Keep the Toss seed defaults intact: +- card surfaces on semantic tokens +- rounded corners from the system scale +- shadow tokens instead of improvised shadow values +- consistent internal padding +- section wrappers that align with the page margin system + +### Step 4: Make the Pattern Dynamic + +Expose data through props instead of hardcoding content. If a pattern has multiple variants, keep the API explicit and small. + +### Step 5: Keep the Pattern Reusable Across Pages + +Avoid page-specific assumptions unless the user explicitly wants a one-off section. If the markup only works on one route, it probably belongs in a page component, not a shared pattern. + +## Output + +Provide: +1. The generated pattern component +2. The target location +3. Expected props and usage example +4. Notes on which existing primitives were reused + +## Best Practices + +- Start from the smallest existing building block that solves the problem +- Keep container, section, and item responsibilities separate +- Use tokens and spacing rules consistently +- Prefer extending a pattern over adding a near-duplicate sibling + +## Additional Resources + +- [StyleSeed repository](https://github.com/bitjaru/styleseed) +- [Source skill](https://github.com/bitjaru/styleseed/blob/main/seeds/toss/.claude/skills/ui-pattern/SKILL.md) diff --git a/plugins/antigravity-awesome-skills-claude/skills/ui-review/SKILL.md b/plugins/antigravity-awesome-skills-claude/skills/ui-review/SKILL.md new file mode 100644 index 00000000..41ea7785 --- /dev/null +++ b/plugins/antigravity-awesome-skills-claude/skills/ui-review/SKILL.md @@ -0,0 +1,86 @@ +--- +name: ui-review +description: "Review UI code for StyleSeed design-system compliance, accessibility, mobile ergonomics, spacing discipline, and implementation quality." +category: design +risk: safe +source: community +source_repo: bitjaru/styleseed +source_type: community +date_added: "2026-04-08" +author: bitjaru +tags: [ui, review, design-system, accessibility, styleseed] +tools: [claude, cursor, codex, gemini] +--- + +# UI Review + +## Overview + +Part of [StyleSeed](https://github.com/bitjaru/styleseed), this skill audits UI code against the Toss seed's conventions instead of reviewing it as generic frontend work. It focuses on design-token discipline, component ergonomics, accessibility, mobile readiness, typography, and spacing consistency. + +## When to Use + +- Use when a component or page should follow the StyleSeed Toss design language +- Use when reviewing a UI-heavy PR for consistency and design-system violations +- Use when the output looks "mostly fine" but feels off in subtle ways +- Use when you need a structured review with concrete fixes + +## Review Checklist + +### Design Tokens + +- no hardcoded hex colors when semantic tokens exist +- no improvised shadow values when tokenized shadows exist +- no arbitrary radius choices outside the system scale +- no random spacing values that break the seed rhythm + +### Component Conventions + +- uses the project's class merge helper +- supports `className` extension when appropriate +- uses the agreed typing pattern +- avoids wrapper components that only forward one class string +- reuses existing primitives before inventing new ones + +### Accessibility + +- touch targets large enough for mobile +- visible keyboard focus states +- labels and `aria-*` attributes where needed +- adequate color contrast +- reduced-motion respect for animation + +### Mobile UX + +- no horizontal overflow +- safe-area handling where relevant +- readable text sizes +- thumb-friendly interaction spacing +- bottom nav or sticky actions do not obscure content + +### Typography and Spacing + +- uses the system type hierarchy +- display and headings are not overly loose +- body text remains readable +- spacing follows the seed grid instead of arbitrary values + +## Output Format + +Return: +1. A verdict: Pass, Needs Improvement, or Fail +2. A prioritized list of issues with file and line references when available +3. Concrete fixes for each issue +4. Any open questions where the design intent is ambiguous + +## Best Practices + +- Review against the seed, not against personal taste +- Separate stylistic drift from real usability or accessibility bugs +- Prefer actionable diffs over abstract criticism +- Call out duplication when an existing component already solves the problem + +## Additional Resources + +- [StyleSeed repository](https://github.com/bitjaru/styleseed) +- [Source skill](https://github.com/bitjaru/styleseed/blob/main/seeds/toss/.claude/skills/ui-review/SKILL.md) diff --git a/plugins/antigravity-awesome-skills-claude/skills/ui-setup/SKILL.md b/plugins/antigravity-awesome-skills-claude/skills/ui-setup/SKILL.md new file mode 100644 index 00000000..e839713c --- /dev/null +++ b/plugins/antigravity-awesome-skills-claude/skills/ui-setup/SKILL.md @@ -0,0 +1,100 @@ +--- +name: ui-setup +description: "Interactive StyleSeed setup wizard for choosing app type, brand color, visual style, typography, and the first screen scaffold." +category: design +risk: safe +source: community +source_repo: bitjaru/styleseed +source_type: community +date_added: "2026-04-08" +author: bitjaru +tags: [ui, design-system, setup, frontend, styleseed] +tools: [claude, cursor, codex, gemini] +--- + +# UI Setup + +## Overview + +Part of [StyleSeed](https://github.com/bitjaru/styleseed), this setup wizard turns a raw project into a design-system-guided workspace. It collects the minimum brand and product context needed to configure tokens, pick a visual direction, and generate an initial page without drifting into generic UI. + +## When to Use + +- Use when you are starting a new app with the StyleSeed Toss seed +- Use when you copied the seed into an existing project and need to personalize it +- Use when you want the AI to ask one design decision at a time instead of guessing +- Use when you need a first page scaffold after selecting colors, font, and app type + +## How It Works + +### Step 1: Ask One Question at a Time + +Do not front-load the full questionnaire. Ask a single question, wait for the answer, store it, then continue. + +### Step 2: Capture the App Type + +Identify the product shape before touching tokens or layout recipes. + +Suggested buckets: +- SaaS dashboard +- E-commerce +- Fintech +- Social or content +- Productivity or internal tool +- Other with a short freeform description + +Use the answer to choose the page composition pattern and the type of first screen to scaffold. + +### Step 3: Choose the Brand Color + +Offer a few safe defaults plus a custom hex option. Once selected: +- update the light theme brand token +- update the dark theme brand token with a lighter accessible variant +- keep all other colors semantic rather than hardcoding the brand everywhere + +If the project uses the StyleSeed Toss seed, the main target is `css/theme.css`. + +### Step 4: Offer an Optional Visual Reference + +Ask whether the user wants to borrow the feel of an established brand or design language. Good examples include Stripe, Linear, Vercel, Notion, Spotify, Supabase, and Airbnb. + +Use the reference to influence density, tone, and composition, not to clone assets or trademarks. + +### Step 5: Pick Typography + +Confirm the font direction: +- keep the default stack +- swap to a preferred font if already installed or available +- preserve hierarchy rules for display, heading, body, and caption text + +If the seed is present, update the font-related files rather than scattering overrides across components. + +### Step 6: Generate the First Screen + +Ask for: +- app name +- first page or screen name +- a one-sentence purpose for that page + +Then scaffold the page using the seed's page shell, top bar, navigation, spacing scale, and card structure. + +## Output + +Return: +1. The captured setup decisions +2. The files or tokens updated +3. The first page or scaffold created +4. Any follow-up recommendations for components, patterns, accessibility, or copy + +## Best Practices + +- Keep the interaction conversational, but deterministic +- Make brand color changes through tokens, not component-by-component edits +- Use an inspiration brand as a reference, not as a permission slip to copy +- Prefer semantic tokens and reusable patterns over page-specific CSS + +## Additional Resources + +- [StyleSeed repository](https://github.com/bitjaru/styleseed) +- [StyleSeed Toss seed](https://github.com/bitjaru/styleseed/tree/main/seeds/toss) +- [Source skill](https://github.com/bitjaru/styleseed/blob/main/seeds/toss/.claude/skills/ui-setup/SKILL.md) diff --git a/plugins/antigravity-awesome-skills-claude/skills/ui-tokens/SKILL.md b/plugins/antigravity-awesome-skills-claude/skills/ui-tokens/SKILL.md new file mode 100644 index 00000000..c7fe9c99 --- /dev/null +++ b/plugins/antigravity-awesome-skills-claude/skills/ui-tokens/SKILL.md @@ -0,0 +1,69 @@ +--- +name: ui-tokens +description: "List, add, and update StyleSeed design tokens while keeping JSON sources, CSS variables, and dark-mode values in sync." +category: design +risk: safe +source: community +source_repo: bitjaru/styleseed +source_type: community +date_added: "2026-04-08" +author: bitjaru +tags: [ui, tokens, design-system, theming, styleseed] +tools: [claude, cursor, codex, gemini] +--- + +# UI Tokens + +## Overview + +Part of [StyleSeed](https://github.com/bitjaru/styleseed), this skill manages design tokens without letting the source-of-truth files drift apart. It is meant for teams using the Toss seed's JSON token files and CSS implementation together. + +## When to Use + +- Use when you need to inspect the current token set +- Use when you want to add a new color, shadow, radius, spacing, or typography token +- Use when you need to update a token and propagate the change safely +- Use when the project has both JSON token files and CSS variables that must stay aligned + +## How It Works + +### Supported Actions + +- `list`: show the current tokens in a human-readable form +- `add`: introduce a new token and wire it through the implementation +- `update`: change an existing token value and audit the downstream usage + +### Typical Source-of-Truth Split + +For the Toss seed: +- JSON under `tokens/` +- CSS variables and theme wiring under `css/theme.css` +- typography support in the font and base CSS files + +### Rules + +- keep JSON and CSS in sync +- prefer semantic names over descriptive names +- provide dark-mode support where relevant +- update the token implementation, not just the source manifest +- check for direct component usage that might now be stale + +## Output + +Return: +1. The requested token inventory or change summary +2. Every file touched +3. Any affected components or utilities that should be reviewed +4. Follow-up actions if the new token requires broader adoption + +## Best Practices + +- Add semantic intent, not one-off brand shades +- Avoid token sprawl by extending existing scales first +- Keep naming consistent with the rest of the system +- Review contrast and accessibility when introducing new colors + +## Additional Resources + +- [StyleSeed repository](https://github.com/bitjaru/styleseed) +- [Source skill](https://github.com/bitjaru/styleseed/blob/main/seeds/toss/.claude/skills/ui-tokens/SKILL.md) diff --git a/plugins/antigravity-awesome-skills-claude/skills/ux-audit/SKILL.md b/plugins/antigravity-awesome-skills-claude/skills/ux-audit/SKILL.md new file mode 100644 index 00000000..1a4f638a --- /dev/null +++ b/plugins/antigravity-awesome-skills-claude/skills/ux-audit/SKILL.md @@ -0,0 +1,62 @@ +--- +name: ux-audit +description: "Audit screens against Nielsen's heuristics and mobile UX best practices using the StyleSeed Toss design language as the implementation context." +category: design +risk: safe +source: community +source_repo: bitjaru/styleseed +source_type: community +date_added: "2026-04-08" +author: bitjaru +tags: [ux, audit, usability, mobile, styleseed] +tools: [claude, cursor, codex, gemini] +--- + +# UX Audit + +## Overview + +Part of [StyleSeed](https://github.com/bitjaru/styleseed), this skill audits usability rather than just visuals. It uses Nielsen's 10 heuristics plus modern mobile UX expectations to find issues in navigation, feedback, recovery, hierarchy, and cognitive load. + +## When to Use + +- Use when a screen feels awkward even though the code and styling seem correct +- Use when evaluating a flow before or after implementation +- Use when reviewing a mobile-first product for usability regressions +- Use when you want findings framed as user experience problems with remediation + +## Audit Framework + +Review the target against: +- visibility of system status +- match between system and real-world language +- user control and freedom +- consistency and standards +- error prevention +- recognition rather than recall +- flexibility and efficiency +- aesthetic and minimalist design +- recovery from errors +- help, onboarding, and empty-state guidance + +Add mobile-specific checks for reachability, touch ergonomics, input burden, and thumb-friendly action placement. + +## Output + +Return: +1. A prioritized issue list +2. The heuristic violated by each issue +3. Why the issue matters to real users +4. Specific remediation suggestions for the page, component, or flow + +## Best Practices + +- Judge the experience from the user's point of view, not the implementer's +- Separate high-severity flow blockers from minor polish issues +- Include recovery and state-management guidance, not only layout comments +- Tie recommendations back to concrete UI changes + +## Additional Resources + +- [StyleSeed repository](https://github.com/bitjaru/styleseed) +- [Source skill](https://github.com/bitjaru/styleseed/blob/main/seeds/toss/.claude/skills/ux-audit/SKILL.md) diff --git a/plugins/antigravity-awesome-skills-claude/skills/ux-copy/SKILL.md b/plugins/antigravity-awesome-skills-claude/skills/ux-copy/SKILL.md new file mode 100644 index 00000000..5df52af8 --- /dev/null +++ b/plugins/antigravity-awesome-skills-claude/skills/ux-copy/SKILL.md @@ -0,0 +1,79 @@ +--- +name: ux-copy +description: "Generate UX microcopy in StyleSeed's Toss-inspired voice for buttons, empty states, errors, toasts, confirmations, and form guidance." +category: design +risk: safe +source: community +source_repo: bitjaru/styleseed +source_type: community +date_added: "2026-04-08" +author: bitjaru +tags: [ux, copywriting, microcopy, frontend, styleseed] +tools: [claude, cursor, codex, gemini] +--- + +# UX Copy + +## Overview + +Part of [StyleSeed](https://github.com/bitjaru/styleseed), this skill generates concise product copy for common UI states. It follows the Toss-inspired tone: casual but polite, direct, active, and specific enough to help the user recover or proceed. + +## When to Use + +- Use when you need button labels, helper text, toasts, empty states, or error messages +- Use when a feature has functional UI but weak or robotic wording +- Use when you want consistent product voice across a flow +- Use when confirmation dialogs or state feedback need better phrasing + +## Tone Rules + +- casual but polite +- active voice over passive voice +- positive framing where it stays honest +- plain language instead of internal jargon +- concise wording where every word earns its place + +## Common Patterns + +### Buttons + +Use a short action verb plus object when needed. + +### Empty States + +Start with a friendly observation, then suggest the next action. + +### Errors + +Explain what happened in user-facing language and what to do next. Do not surface raw internal error strings. + +### Toasts + +Confirm the result quickly. Add an undo action for reversible destructive behavior. + +### Forms + +Use clear labels, useful placeholders, specific helper text, and corrective error messages. + +### Confirmation Dialogs + +State the action in plain language and explain the consequence if the decision is risky or irreversible. + +## Output + +Return: +1. The requested microcopy grouped by UI surface +2. Notes on tone or localization considerations if relevant +3. Any places where the UX likely needs a structural fix in addition to better copy + +## Best Practices + +- Make the next action obvious +- Avoid generic labels like "Submit" or "OK" when the action can be named precisely +- Blame the system, not the user, when something fails +- Keep error and empty states useful even without visual context + +## Additional Resources + +- [StyleSeed repository](https://github.com/bitjaru/styleseed) +- [Source skill](https://github.com/bitjaru/styleseed/blob/main/seeds/toss/.claude/skills/ux-copy/SKILL.md) diff --git a/plugins/antigravity-awesome-skills-claude/skills/ux-feedback/SKILL.md b/plugins/antigravity-awesome-skills-claude/skills/ux-feedback/SKILL.md new file mode 100644 index 00000000..26e247a2 --- /dev/null +++ b/plugins/antigravity-awesome-skills-claude/skills/ux-feedback/SKILL.md @@ -0,0 +1,64 @@ +--- +name: ux-feedback +description: "Add loading, empty, error, and success feedback states to StyleSeed components and pages with practical mobile-first rules." +category: design +risk: safe +source: community +source_repo: bitjaru/styleseed +source_type: community +date_added: "2026-04-08" +author: bitjaru +tags: [ux, states, loading, error-handling, styleseed] +tools: [claude, cursor, codex, gemini] +--- + +# UX Feedback + +## Overview + +Part of [StyleSeed](https://github.com/bitjaru/styleseed), this skill ensures data-dependent UI does not stop at the happy path. It adds the four core feedback states every serious product needs: loading, empty, error, and success. + +## When to Use + +- Use when a component or page fetches, mutates, or depends on async data +- Use when a flow currently renders only the success path +- Use when a card, list, or page needs better state communication +- Use when the product needs clear recovery and confirmation behavior + +## The Four Required States + +### Loading + +Use skeletons that match the final layout. Avoid spinners inside cards unless the pattern genuinely requires them. Delay skeletons slightly to avoid flashes on fast responses. + +### Empty + +Provide a friendly explanation and a next action. Zero values should still render meaningfully instead of disappearing. + +### Error + +Use plain-language failure messages and always offer recovery where possible. Localize failures to the affected card or section if the rest of the page can still work. + +### Success + +Use toasts or equivalent lightweight confirmation for completed actions. Add undo for reversible destructive changes. + +## Output + +Return: +1. The data-dependent areas identified +2. The loading, empty, error, and success states added for each one +3. Any reusable empty-state or toast patterns created +4. Follow-up work needed for analytics, retries, or accessibility + +## Best Practices + +- Match loading placeholders to the real layout +- Keep partial failure isolated whenever possible +- Make recovery obvious, not hidden in logs or developer tools +- Use success feedback sparingly but clearly + +## Additional Resources + +- [StyleSeed repository](https://github.com/bitjaru/styleseed) +- [Source skill](https://github.com/bitjaru/styleseed/blob/main/seeds/toss/.claude/skills/ux-feedback/SKILL.md) diff --git a/plugins/antigravity-awesome-skills-claude/skills/ux-flow/SKILL.md b/plugins/antigravity-awesome-skills-claude/skills/ux-flow/SKILL.md new file mode 100644 index 00000000..a2455a5e --- /dev/null +++ b/plugins/antigravity-awesome-skills-claude/skills/ux-flow/SKILL.md @@ -0,0 +1,68 @@ +--- +name: ux-flow +description: "Design user flows and screen structure using StyleSeed UX patterns such as progressive disclosure, hub-and-spoke navigation, and information pyramids." +category: design +risk: safe +source: community +source_repo: bitjaru/styleseed +source_type: community +date_added: "2026-04-08" +author: bitjaru +tags: [ux, flows, navigation, product-design, styleseed] +tools: [claude, cursor, codex, gemini] +--- + +# UX Flow + +## Overview + +Part of [StyleSeed](https://github.com/bitjaru/styleseed), this skill designs flows before screens. It uses proven UX patterns to define entry points, exits, screen inventory, and navigation structure so the implementation has a coherent user journey instead of a pile of disconnected pages. + +## When to Use + +- Use when planning onboarding, checkout, account management, dashboards, or drill-down flows +- Use when a new feature spans multiple screens or modal states +- Use when users need a clear path through a task instead of a single isolated page +- Use when the UI needs navigation logic before components are built + +## How It Works + +### Information Architecture Principles + +- progressive disclosure: reveal complexity only when needed +- Miller's Law: chunk content into manageable groups +- Hick's Law: minimize decision overload on each screen + +### Common Navigation Models + +- hub and spoke for dashboards and detail views +- linear flow for onboarding, forms, and checkout +- tab navigation for 3 to 5 top-level areas + +### Flow Rules + +- every flow has a clear entry point +- every flow has a clear exit or success condition +- key features should usually be reachable within three taps from home +- non-root screens need back navigation +- loading, empty, and error states need explicit recovery paths + +## Output + +Provide: +1. An ASCII flow diagram +2. A screen inventory with each screen's purpose +3. Edge cases for loading, empty, and error states +4. Recommended page scaffolds and reusable patterns to implement next + +## Best Practices + +- Optimize for clarity before density +- Let one screen answer one primary question +- Keep escape hatches visible for risky or destructive steps +- Define state transitions before drawing detailed layouts + +## Additional Resources + +- [StyleSeed repository](https://github.com/bitjaru/styleseed) +- [Source skill](https://github.com/bitjaru/styleseed/blob/main/seeds/toss/.claude/skills/ux-flow/SKILL.md) diff --git a/plugins/antigravity-awesome-skills/.codex-plugin/plugin.json b/plugins/antigravity-awesome-skills/.codex-plugin/plugin.json index 07ee3ce5..3f3e2cd1 100644 --- a/plugins/antigravity-awesome-skills/.codex-plugin/plugin.json +++ b/plugins/antigravity-awesome-skills/.codex-plugin/plugin.json @@ -19,7 +19,7 @@ "skills": "./skills/", "interface": { "displayName": "Antigravity Awesome Skills", - "shortDescription": "1,352 plugin-safe skills for coding, security, product, and ops workflows.", + "shortDescription": "1,363 plugin-safe skills for coding, security, product, and ops workflows.", "longDescription": "Install a plugin-safe Codex distribution of Antigravity Awesome Skills. Skills that still need hardening or target-specific setup remain available in the repo but are excluded from this plugin.", "developerName": "sickn33 and contributors", "category": "Productivity", diff --git a/plugins/antigravity-awesome-skills/skills/ui-a11y/SKILL.md b/plugins/antigravity-awesome-skills/skills/ui-a11y/SKILL.md new file mode 100644 index 00000000..4a2482df --- /dev/null +++ b/plugins/antigravity-awesome-skills/skills/ui-a11y/SKILL.md @@ -0,0 +1,77 @@ +--- +name: ui-a11y +description: "Audit a StyleSeed-based component or page for WCAG 2.2 AA issues and apply practical accessibility fixes where the code makes them safe." +category: design +risk: safe +source: community +source_repo: bitjaru/styleseed +source_type: community +date_added: "2026-04-08" +author: bitjaru +tags: [ui, accessibility, wcag, audit, styleseed] +tools: [claude, cursor, codex, gemini] +--- + +# UI Accessibility Audit + +## Overview + +Part of [StyleSeed](https://github.com/bitjaru/styleseed), this skill audits components and pages for accessibility issues with an emphasis on the Toss seed's mobile UI patterns. It combines WCAG 2.2 AA checks with practical code fixes for touch targets, focus states, contrast, labels, and reduced motion. + +## When to Use + +- Use when reviewing a page or component for accessibility regressions +- Use when a StyleSeed UI looks polished but has uncertain keyboard or contrast behavior +- Use when adding new interactive controls to a mobile-first screen +- Use when you want a prioritized list of issues and fixable items + +## Audit Areas + +### Perceivable + +- text contrast +- non-text contrast for controls and graphics +- alt text for images +- labels for meaningful icons +- no information conveyed by color alone + +### Operable + +- touch targets at least 44x44px +- keyboard reachability for all interactive controls +- logical tab order +- visible focus indicators +- reduced-motion support for nonessential animation + +### Understandable + +- visible labels or `aria-label` on inputs +- error text associated with the correct field +- clear wording for errors and validation +- document language set appropriately + +### Robust + +- semantic HTML where possible +- correct use of ARIA when semantics alone are insufficient +- no faux buttons or links without the right roles and behavior + +## Output + +Return: +1. Issues found, grouped by severity +2. Safe autofixes that can be applied directly +3. Items that need manual review or product judgment +4. A short summary of the accessibility risk level + +## Best Practices + +- Fix semantics before layering on ARIA +- Use the design system tokens only if they still meet contrast requirements +- Treat touch target failures as real usability defects, not polish issues +- Prefer partial, verified fixes over speculative accessibility changes + +## Additional Resources + +- [StyleSeed repository](https://github.com/bitjaru/styleseed) +- [Source skill](https://github.com/bitjaru/styleseed/blob/main/seeds/toss/.claude/skills/ui-a11y/SKILL.md) diff --git a/plugins/antigravity-awesome-skills/skills/ui-component/SKILL.md b/plugins/antigravity-awesome-skills/skills/ui-component/SKILL.md new file mode 100644 index 00000000..91b99db8 --- /dev/null +++ b/plugins/antigravity-awesome-skills/skills/ui-component/SKILL.md @@ -0,0 +1,100 @@ +--- +name: ui-component +description: "Generate a new UI component that follows StyleSeed Toss conventions for structure, tokens, accessibility, and component ergonomics." +category: design +risk: safe +source: community +source_repo: bitjaru/styleseed +source_type: community +date_added: "2026-04-08" +author: bitjaru +tags: [ui, components, design-system, frontend, styleseed] +tools: [claude, cursor, codex, gemini] +--- + +# UI Component + +## Overview + +Part of [StyleSeed](https://github.com/bitjaru/styleseed), this skill generates components that respect the Toss seed's design language instead of improvising ad hoc markup and styling. It emphasizes semantic tokens, predictable typing, reusable variants, and mobile-friendly accessibility defaults. + +## When to Use + +- Use when you need a new UI primitive or composed component inside a StyleSeed-based project +- Use when you want a component to match the existing Toss seed conventions +- Use when a component should be reusable, typed, and design-token driven +- Use when the AI might otherwise invent spacing, colors, or interaction patterns + +## How It Works + +### Step 1: Read the Local Design Context + +Before generating code, inspect the seed's source of truth: +- `CLAUDE.md` for conventions +- `css/theme.css` for semantic tokens +- at least one representative component from `components/ui/` + +If the user already has a better local example, follow the local codebase over a generic template. + +### Step 2: Choose the Correct Home + +Place the output where it belongs: +- `src/components/ui/` for primitives and low-level building blocks +- `src/components/patterns/` for composed sections or multi-part patterns + +Do not create a new primitive if an existing one can be extended safely. + +### Step 3: Follow the Structural Rules + +Use these defaults unless the host project strongly disagrees: +- function declaration instead of a `const` component +- `React.ComponentProps<>` or equivalent native prop typing +- `className` passthrough support +- `cn()` or the project's standard class merger +- `data-slot` for component identification +- CVA or equivalent only when variants are genuinely needed + +### Step 4: Use Semantic Tokens Only + +Do not hardcode visual values if the design system has a token for them. + +Preferred examples: +- `bg-card` +- `text-foreground` +- `text-muted-foreground` +- `border-border` +- `shadow-[var(--shadow-card)]` + +### Step 5: Preserve StyleSeed Typography and Spacing + +- Use the scale already defined by the seed +- Prefer multiples of 6px +- Use logical spacing utilities where supported +- Keep display and heading text tight, body text readable, captions restrained + +### Step 6: Bake in Accessibility + +- Touch targets should be at least 44x44px for interactive elements +- Keyboard focus must be visible +- Pass through `aria-*` attributes where appropriate +- Respect reduced-motion preferences for nonessential motion + +## Output + +Provide: +1. The generated component +2. The target path +3. Any required imports or dependencies +4. Notes on variants, tokens, or follow-up integration work + +## Best Practices + +- Compose from existing primitives before inventing new ones +- Keep the component API small and predictable +- Prefer semantic layout classes over arbitrary values +- Export named components unless the host project uses another standard consistently + +## Additional Resources + +- [StyleSeed repository](https://github.com/bitjaru/styleseed) +- [Source skill](https://github.com/bitjaru/styleseed/blob/main/seeds/toss/.claude/skills/ui-component/SKILL.md) diff --git a/plugins/antigravity-awesome-skills/skills/ui-page/SKILL.md b/plugins/antigravity-awesome-skills/skills/ui-page/SKILL.md new file mode 100644 index 00000000..e8da4e8c --- /dev/null +++ b/plugins/antigravity-awesome-skills/skills/ui-page/SKILL.md @@ -0,0 +1,96 @@ +--- +name: ui-page +description: "Scaffold a new mobile-first page using StyleSeed Toss layout patterns, section rhythm, and existing shell components." +category: design +risk: safe +source: community +source_repo: bitjaru/styleseed +source_type: community +date_added: "2026-04-08" +author: bitjaru +tags: [ui, page-design, mobile, layout, styleseed] +tools: [claude, cursor, codex, gemini] +--- + +# UI Page + +## Overview + +Part of [StyleSeed](https://github.com/bitjaru/styleseed), this skill scaffolds a complete page or screen using the Toss seed's mobile-first composition rules. It keeps page structure consistent by building on the existing shell, top bar, bottom navigation, and card rhythm instead of producing disconnected sections. + +## When to Use + +- Use when you need a new page in a Toss-seed app +- Use when you want a consistent page shell, spacing, and navigation structure +- Use when you are adding a new product flow and need a solid starting layout +- Use when you want to stay mobile-first even if the project later expands to larger breakpoints + +## How It Works + +### Step 1: Inspect the Existing Shell + +Read the current page scaffolding patterns first, especially: +- page shell +- top bar +- bottom navigation +- representative pages using the same route family + +### Step 2: Define the Page Purpose + +Clarify: +- the page name +- the primary user question the screen answers +- the top one or two actions the user should take + +Every screen should have one dominant purpose. + +### Step 3: Use the Information Pyramid + +Lay out the page from highest importance to lowest: +1. Hero or top summary +2. KPI or key actions +3. detail cards or supporting modules +4. lists, history, or secondary content + +Avoid repeating the same section type mechanically from top to bottom. + +### Step 4: Apply the Toss Layout Rules + +Default layout choices: +- mobile viewport width around `max-w-[430px]` +- page background on `bg-background` +- horizontal padding around `px-6` +- section rhythm with `space-y-6` +- generous bottom padding if a bottom nav is present +- cards using semantic surface tokens, rounded corners, and light shadows + +### Step 5: Compose Instead of Rebuilding + +Use existing `ui/` and `patterns/` components wherever possible. New pages should primarily orchestrate existing building blocks, not recreate them. + +### Step 6: Account for Real Device Constraints + +- handle safe-area insets +- avoid horizontal overflow +- keep interactive clusters thumb-friendly +- ensure long content scrolls cleanly without clipping the bottom navigation + +## Output + +Return: +1. The page scaffold +2. The chosen section structure +3. Reused components and any newly required components +4. Empty, loading, and error states that the page will need next + +## Best Practices + +- Keep the first version structurally correct before adding decoration +- Use one strong hero instead of multiple competing highlights +- Preserve navigation consistency across sibling screens +- Prefer reusable section components when the page will likely repeat + +## Additional Resources + +- [StyleSeed repository](https://github.com/bitjaru/styleseed) +- [Source skill](https://github.com/bitjaru/styleseed/blob/main/seeds/toss/.claude/skills/ui-page/SKILL.md) diff --git a/plugins/antigravity-awesome-skills/skills/ui-pattern/SKILL.md b/plugins/antigravity-awesome-skills/skills/ui-pattern/SKILL.md new file mode 100644 index 00000000..1fa05ba9 --- /dev/null +++ b/plugins/antigravity-awesome-skills/skills/ui-pattern/SKILL.md @@ -0,0 +1,88 @@ +--- +name: ui-pattern +description: "Generate reusable UI patterns such as card sections, grids, lists, forms, and chart wrappers using StyleSeed Toss primitives." +category: design +risk: safe +source: community +source_repo: bitjaru/styleseed +source_type: community +date_added: "2026-04-08" +author: bitjaru +tags: [ui, patterns, design-system, reuse, styleseed] +tools: [claude, cursor, codex, gemini] +--- + +# UI Pattern + +## Overview + +Part of [StyleSeed](https://github.com/bitjaru/styleseed), this skill builds reusable composed patterns from the seed's primitives. It is intended for sections like card lists, grids, form blocks, ranking lists, and chart wrappers that appear across multiple pages and need to look deliberate rather than ad hoc. + +## When to Use + +- Use when you need a reusable layout pattern rather than a one-off page section +- Use when a page repeats the same arrangement of cards, rows, filters, or data blocks +- Use when you want to build from existing StyleSeed primitives instead of copying markup +- Use when you want a pattern component with props for dynamic content + +## How It Works + +### Step 1: Identify the Pattern Type + +Common pattern families include: +- card section +- two-column grid +- horizontal scroller +- list section +- form section +- stat grid +- data table +- detail card +- chart card +- filter bar +- action sheet + +### Step 2: Read the Available Building Blocks + +Inspect both: +- `components/ui/` for primitives +- `components/patterns/` for neighboring patterns that can be extended + +The goal is composition, not duplication. + +### Step 3: Apply StyleSeed Layout Rules + +Keep the Toss seed defaults intact: +- card surfaces on semantic tokens +- rounded corners from the system scale +- shadow tokens instead of improvised shadow values +- consistent internal padding +- section wrappers that align with the page margin system + +### Step 4: Make the Pattern Dynamic + +Expose data through props instead of hardcoding content. If a pattern has multiple variants, keep the API explicit and small. + +### Step 5: Keep the Pattern Reusable Across Pages + +Avoid page-specific assumptions unless the user explicitly wants a one-off section. If the markup only works on one route, it probably belongs in a page component, not a shared pattern. + +## Output + +Provide: +1. The generated pattern component +2. The target location +3. Expected props and usage example +4. Notes on which existing primitives were reused + +## Best Practices + +- Start from the smallest existing building block that solves the problem +- Keep container, section, and item responsibilities separate +- Use tokens and spacing rules consistently +- Prefer extending a pattern over adding a near-duplicate sibling + +## Additional Resources + +- [StyleSeed repository](https://github.com/bitjaru/styleseed) +- [Source skill](https://github.com/bitjaru/styleseed/blob/main/seeds/toss/.claude/skills/ui-pattern/SKILL.md) diff --git a/plugins/antigravity-awesome-skills/skills/ui-review/SKILL.md b/plugins/antigravity-awesome-skills/skills/ui-review/SKILL.md new file mode 100644 index 00000000..41ea7785 --- /dev/null +++ b/plugins/antigravity-awesome-skills/skills/ui-review/SKILL.md @@ -0,0 +1,86 @@ +--- +name: ui-review +description: "Review UI code for StyleSeed design-system compliance, accessibility, mobile ergonomics, spacing discipline, and implementation quality." +category: design +risk: safe +source: community +source_repo: bitjaru/styleseed +source_type: community +date_added: "2026-04-08" +author: bitjaru +tags: [ui, review, design-system, accessibility, styleseed] +tools: [claude, cursor, codex, gemini] +--- + +# UI Review + +## Overview + +Part of [StyleSeed](https://github.com/bitjaru/styleseed), this skill audits UI code against the Toss seed's conventions instead of reviewing it as generic frontend work. It focuses on design-token discipline, component ergonomics, accessibility, mobile readiness, typography, and spacing consistency. + +## When to Use + +- Use when a component or page should follow the StyleSeed Toss design language +- Use when reviewing a UI-heavy PR for consistency and design-system violations +- Use when the output looks "mostly fine" but feels off in subtle ways +- Use when you need a structured review with concrete fixes + +## Review Checklist + +### Design Tokens + +- no hardcoded hex colors when semantic tokens exist +- no improvised shadow values when tokenized shadows exist +- no arbitrary radius choices outside the system scale +- no random spacing values that break the seed rhythm + +### Component Conventions + +- uses the project's class merge helper +- supports `className` extension when appropriate +- uses the agreed typing pattern +- avoids wrapper components that only forward one class string +- reuses existing primitives before inventing new ones + +### Accessibility + +- touch targets large enough for mobile +- visible keyboard focus states +- labels and `aria-*` attributes where needed +- adequate color contrast +- reduced-motion respect for animation + +### Mobile UX + +- no horizontal overflow +- safe-area handling where relevant +- readable text sizes +- thumb-friendly interaction spacing +- bottom nav or sticky actions do not obscure content + +### Typography and Spacing + +- uses the system type hierarchy +- display and headings are not overly loose +- body text remains readable +- spacing follows the seed grid instead of arbitrary values + +## Output Format + +Return: +1. A verdict: Pass, Needs Improvement, or Fail +2. A prioritized list of issues with file and line references when available +3. Concrete fixes for each issue +4. Any open questions where the design intent is ambiguous + +## Best Practices + +- Review against the seed, not against personal taste +- Separate stylistic drift from real usability or accessibility bugs +- Prefer actionable diffs over abstract criticism +- Call out duplication when an existing component already solves the problem + +## Additional Resources + +- [StyleSeed repository](https://github.com/bitjaru/styleseed) +- [Source skill](https://github.com/bitjaru/styleseed/blob/main/seeds/toss/.claude/skills/ui-review/SKILL.md) diff --git a/plugins/antigravity-awesome-skills/skills/ui-setup/SKILL.md b/plugins/antigravity-awesome-skills/skills/ui-setup/SKILL.md new file mode 100644 index 00000000..e839713c --- /dev/null +++ b/plugins/antigravity-awesome-skills/skills/ui-setup/SKILL.md @@ -0,0 +1,100 @@ +--- +name: ui-setup +description: "Interactive StyleSeed setup wizard for choosing app type, brand color, visual style, typography, and the first screen scaffold." +category: design +risk: safe +source: community +source_repo: bitjaru/styleseed +source_type: community +date_added: "2026-04-08" +author: bitjaru +tags: [ui, design-system, setup, frontend, styleseed] +tools: [claude, cursor, codex, gemini] +--- + +# UI Setup + +## Overview + +Part of [StyleSeed](https://github.com/bitjaru/styleseed), this setup wizard turns a raw project into a design-system-guided workspace. It collects the minimum brand and product context needed to configure tokens, pick a visual direction, and generate an initial page without drifting into generic UI. + +## When to Use + +- Use when you are starting a new app with the StyleSeed Toss seed +- Use when you copied the seed into an existing project and need to personalize it +- Use when you want the AI to ask one design decision at a time instead of guessing +- Use when you need a first page scaffold after selecting colors, font, and app type + +## How It Works + +### Step 1: Ask One Question at a Time + +Do not front-load the full questionnaire. Ask a single question, wait for the answer, store it, then continue. + +### Step 2: Capture the App Type + +Identify the product shape before touching tokens or layout recipes. + +Suggested buckets: +- SaaS dashboard +- E-commerce +- Fintech +- Social or content +- Productivity or internal tool +- Other with a short freeform description + +Use the answer to choose the page composition pattern and the type of first screen to scaffold. + +### Step 3: Choose the Brand Color + +Offer a few safe defaults plus a custom hex option. Once selected: +- update the light theme brand token +- update the dark theme brand token with a lighter accessible variant +- keep all other colors semantic rather than hardcoding the brand everywhere + +If the project uses the StyleSeed Toss seed, the main target is `css/theme.css`. + +### Step 4: Offer an Optional Visual Reference + +Ask whether the user wants to borrow the feel of an established brand or design language. Good examples include Stripe, Linear, Vercel, Notion, Spotify, Supabase, and Airbnb. + +Use the reference to influence density, tone, and composition, not to clone assets or trademarks. + +### Step 5: Pick Typography + +Confirm the font direction: +- keep the default stack +- swap to a preferred font if already installed or available +- preserve hierarchy rules for display, heading, body, and caption text + +If the seed is present, update the font-related files rather than scattering overrides across components. + +### Step 6: Generate the First Screen + +Ask for: +- app name +- first page or screen name +- a one-sentence purpose for that page + +Then scaffold the page using the seed's page shell, top bar, navigation, spacing scale, and card structure. + +## Output + +Return: +1. The captured setup decisions +2. The files or tokens updated +3. The first page or scaffold created +4. Any follow-up recommendations for components, patterns, accessibility, or copy + +## Best Practices + +- Keep the interaction conversational, but deterministic +- Make brand color changes through tokens, not component-by-component edits +- Use an inspiration brand as a reference, not as a permission slip to copy +- Prefer semantic tokens and reusable patterns over page-specific CSS + +## Additional Resources + +- [StyleSeed repository](https://github.com/bitjaru/styleseed) +- [StyleSeed Toss seed](https://github.com/bitjaru/styleseed/tree/main/seeds/toss) +- [Source skill](https://github.com/bitjaru/styleseed/blob/main/seeds/toss/.claude/skills/ui-setup/SKILL.md) diff --git a/plugins/antigravity-awesome-skills/skills/ui-tokens/SKILL.md b/plugins/antigravity-awesome-skills/skills/ui-tokens/SKILL.md new file mode 100644 index 00000000..c7fe9c99 --- /dev/null +++ b/plugins/antigravity-awesome-skills/skills/ui-tokens/SKILL.md @@ -0,0 +1,69 @@ +--- +name: ui-tokens +description: "List, add, and update StyleSeed design tokens while keeping JSON sources, CSS variables, and dark-mode values in sync." +category: design +risk: safe +source: community +source_repo: bitjaru/styleseed +source_type: community +date_added: "2026-04-08" +author: bitjaru +tags: [ui, tokens, design-system, theming, styleseed] +tools: [claude, cursor, codex, gemini] +--- + +# UI Tokens + +## Overview + +Part of [StyleSeed](https://github.com/bitjaru/styleseed), this skill manages design tokens without letting the source-of-truth files drift apart. It is meant for teams using the Toss seed's JSON token files and CSS implementation together. + +## When to Use + +- Use when you need to inspect the current token set +- Use when you want to add a new color, shadow, radius, spacing, or typography token +- Use when you need to update a token and propagate the change safely +- Use when the project has both JSON token files and CSS variables that must stay aligned + +## How It Works + +### Supported Actions + +- `list`: show the current tokens in a human-readable form +- `add`: introduce a new token and wire it through the implementation +- `update`: change an existing token value and audit the downstream usage + +### Typical Source-of-Truth Split + +For the Toss seed: +- JSON under `tokens/` +- CSS variables and theme wiring under `css/theme.css` +- typography support in the font and base CSS files + +### Rules + +- keep JSON and CSS in sync +- prefer semantic names over descriptive names +- provide dark-mode support where relevant +- update the token implementation, not just the source manifest +- check for direct component usage that might now be stale + +## Output + +Return: +1. The requested token inventory or change summary +2. Every file touched +3. Any affected components or utilities that should be reviewed +4. Follow-up actions if the new token requires broader adoption + +## Best Practices + +- Add semantic intent, not one-off brand shades +- Avoid token sprawl by extending existing scales first +- Keep naming consistent with the rest of the system +- Review contrast and accessibility when introducing new colors + +## Additional Resources + +- [StyleSeed repository](https://github.com/bitjaru/styleseed) +- [Source skill](https://github.com/bitjaru/styleseed/blob/main/seeds/toss/.claude/skills/ui-tokens/SKILL.md) diff --git a/plugins/antigravity-awesome-skills/skills/ux-audit/SKILL.md b/plugins/antigravity-awesome-skills/skills/ux-audit/SKILL.md new file mode 100644 index 00000000..1a4f638a --- /dev/null +++ b/plugins/antigravity-awesome-skills/skills/ux-audit/SKILL.md @@ -0,0 +1,62 @@ +--- +name: ux-audit +description: "Audit screens against Nielsen's heuristics and mobile UX best practices using the StyleSeed Toss design language as the implementation context." +category: design +risk: safe +source: community +source_repo: bitjaru/styleseed +source_type: community +date_added: "2026-04-08" +author: bitjaru +tags: [ux, audit, usability, mobile, styleseed] +tools: [claude, cursor, codex, gemini] +--- + +# UX Audit + +## Overview + +Part of [StyleSeed](https://github.com/bitjaru/styleseed), this skill audits usability rather than just visuals. It uses Nielsen's 10 heuristics plus modern mobile UX expectations to find issues in navigation, feedback, recovery, hierarchy, and cognitive load. + +## When to Use + +- Use when a screen feels awkward even though the code and styling seem correct +- Use when evaluating a flow before or after implementation +- Use when reviewing a mobile-first product for usability regressions +- Use when you want findings framed as user experience problems with remediation + +## Audit Framework + +Review the target against: +- visibility of system status +- match between system and real-world language +- user control and freedom +- consistency and standards +- error prevention +- recognition rather than recall +- flexibility and efficiency +- aesthetic and minimalist design +- recovery from errors +- help, onboarding, and empty-state guidance + +Add mobile-specific checks for reachability, touch ergonomics, input burden, and thumb-friendly action placement. + +## Output + +Return: +1. A prioritized issue list +2. The heuristic violated by each issue +3. Why the issue matters to real users +4. Specific remediation suggestions for the page, component, or flow + +## Best Practices + +- Judge the experience from the user's point of view, not the implementer's +- Separate high-severity flow blockers from minor polish issues +- Include recovery and state-management guidance, not only layout comments +- Tie recommendations back to concrete UI changes + +## Additional Resources + +- [StyleSeed repository](https://github.com/bitjaru/styleseed) +- [Source skill](https://github.com/bitjaru/styleseed/blob/main/seeds/toss/.claude/skills/ux-audit/SKILL.md) diff --git a/plugins/antigravity-awesome-skills/skills/ux-copy/SKILL.md b/plugins/antigravity-awesome-skills/skills/ux-copy/SKILL.md new file mode 100644 index 00000000..5df52af8 --- /dev/null +++ b/plugins/antigravity-awesome-skills/skills/ux-copy/SKILL.md @@ -0,0 +1,79 @@ +--- +name: ux-copy +description: "Generate UX microcopy in StyleSeed's Toss-inspired voice for buttons, empty states, errors, toasts, confirmations, and form guidance." +category: design +risk: safe +source: community +source_repo: bitjaru/styleseed +source_type: community +date_added: "2026-04-08" +author: bitjaru +tags: [ux, copywriting, microcopy, frontend, styleseed] +tools: [claude, cursor, codex, gemini] +--- + +# UX Copy + +## Overview + +Part of [StyleSeed](https://github.com/bitjaru/styleseed), this skill generates concise product copy for common UI states. It follows the Toss-inspired tone: casual but polite, direct, active, and specific enough to help the user recover or proceed. + +## When to Use + +- Use when you need button labels, helper text, toasts, empty states, or error messages +- Use when a feature has functional UI but weak or robotic wording +- Use when you want consistent product voice across a flow +- Use when confirmation dialogs or state feedback need better phrasing + +## Tone Rules + +- casual but polite +- active voice over passive voice +- positive framing where it stays honest +- plain language instead of internal jargon +- concise wording where every word earns its place + +## Common Patterns + +### Buttons + +Use a short action verb plus object when needed. + +### Empty States + +Start with a friendly observation, then suggest the next action. + +### Errors + +Explain what happened in user-facing language and what to do next. Do not surface raw internal error strings. + +### Toasts + +Confirm the result quickly. Add an undo action for reversible destructive behavior. + +### Forms + +Use clear labels, useful placeholders, specific helper text, and corrective error messages. + +### Confirmation Dialogs + +State the action in plain language and explain the consequence if the decision is risky or irreversible. + +## Output + +Return: +1. The requested microcopy grouped by UI surface +2. Notes on tone or localization considerations if relevant +3. Any places where the UX likely needs a structural fix in addition to better copy + +## Best Practices + +- Make the next action obvious +- Avoid generic labels like "Submit" or "OK" when the action can be named precisely +- Blame the system, not the user, when something fails +- Keep error and empty states useful even without visual context + +## Additional Resources + +- [StyleSeed repository](https://github.com/bitjaru/styleseed) +- [Source skill](https://github.com/bitjaru/styleseed/blob/main/seeds/toss/.claude/skills/ux-copy/SKILL.md) diff --git a/plugins/antigravity-awesome-skills/skills/ux-feedback/SKILL.md b/plugins/antigravity-awesome-skills/skills/ux-feedback/SKILL.md new file mode 100644 index 00000000..26e247a2 --- /dev/null +++ b/plugins/antigravity-awesome-skills/skills/ux-feedback/SKILL.md @@ -0,0 +1,64 @@ +--- +name: ux-feedback +description: "Add loading, empty, error, and success feedback states to StyleSeed components and pages with practical mobile-first rules." +category: design +risk: safe +source: community +source_repo: bitjaru/styleseed +source_type: community +date_added: "2026-04-08" +author: bitjaru +tags: [ux, states, loading, error-handling, styleseed] +tools: [claude, cursor, codex, gemini] +--- + +# UX Feedback + +## Overview + +Part of [StyleSeed](https://github.com/bitjaru/styleseed), this skill ensures data-dependent UI does not stop at the happy path. It adds the four core feedback states every serious product needs: loading, empty, error, and success. + +## When to Use + +- Use when a component or page fetches, mutates, or depends on async data +- Use when a flow currently renders only the success path +- Use when a card, list, or page needs better state communication +- Use when the product needs clear recovery and confirmation behavior + +## The Four Required States + +### Loading + +Use skeletons that match the final layout. Avoid spinners inside cards unless the pattern genuinely requires them. Delay skeletons slightly to avoid flashes on fast responses. + +### Empty + +Provide a friendly explanation and a next action. Zero values should still render meaningfully instead of disappearing. + +### Error + +Use plain-language failure messages and always offer recovery where possible. Localize failures to the affected card or section if the rest of the page can still work. + +### Success + +Use toasts or equivalent lightweight confirmation for completed actions. Add undo for reversible destructive changes. + +## Output + +Return: +1. The data-dependent areas identified +2. The loading, empty, error, and success states added for each one +3. Any reusable empty-state or toast patterns created +4. Follow-up work needed for analytics, retries, or accessibility + +## Best Practices + +- Match loading placeholders to the real layout +- Keep partial failure isolated whenever possible +- Make recovery obvious, not hidden in logs or developer tools +- Use success feedback sparingly but clearly + +## Additional Resources + +- [StyleSeed repository](https://github.com/bitjaru/styleseed) +- [Source skill](https://github.com/bitjaru/styleseed/blob/main/seeds/toss/.claude/skills/ux-feedback/SKILL.md) diff --git a/plugins/antigravity-awesome-skills/skills/ux-flow/SKILL.md b/plugins/antigravity-awesome-skills/skills/ux-flow/SKILL.md new file mode 100644 index 00000000..a2455a5e --- /dev/null +++ b/plugins/antigravity-awesome-skills/skills/ux-flow/SKILL.md @@ -0,0 +1,68 @@ +--- +name: ux-flow +description: "Design user flows and screen structure using StyleSeed UX patterns such as progressive disclosure, hub-and-spoke navigation, and information pyramids." +category: design +risk: safe +source: community +source_repo: bitjaru/styleseed +source_type: community +date_added: "2026-04-08" +author: bitjaru +tags: [ux, flows, navigation, product-design, styleseed] +tools: [claude, cursor, codex, gemini] +--- + +# UX Flow + +## Overview + +Part of [StyleSeed](https://github.com/bitjaru/styleseed), this skill designs flows before screens. It uses proven UX patterns to define entry points, exits, screen inventory, and navigation structure so the implementation has a coherent user journey instead of a pile of disconnected pages. + +## When to Use + +- Use when planning onboarding, checkout, account management, dashboards, or drill-down flows +- Use when a new feature spans multiple screens or modal states +- Use when users need a clear path through a task instead of a single isolated page +- Use when the UI needs navigation logic before components are built + +## How It Works + +### Information Architecture Principles + +- progressive disclosure: reveal complexity only when needed +- Miller's Law: chunk content into manageable groups +- Hick's Law: minimize decision overload on each screen + +### Common Navigation Models + +- hub and spoke for dashboards and detail views +- linear flow for onboarding, forms, and checkout +- tab navigation for 3 to 5 top-level areas + +### Flow Rules + +- every flow has a clear entry point +- every flow has a clear exit or success condition +- key features should usually be reachable within three taps from home +- non-root screens need back navigation +- loading, empty, and error states need explicit recovery paths + +## Output + +Provide: +1. An ASCII flow diagram +2. A screen inventory with each screen's purpose +3. Edge cases for loading, empty, and error states +4. Recommended page scaffolds and reusable patterns to implement next + +## Best Practices + +- Optimize for clarity before density +- Let one screen answer one primary question +- Keep escape hatches visible for risky or destructive steps +- Define state transitions before drawing detailed layouts + +## Additional Resources + +- [StyleSeed repository](https://github.com/bitjaru/styleseed) +- [Source skill](https://github.com/bitjaru/styleseed/blob/main/seeds/toss/.claude/skills/ux-flow/SKILL.md) diff --git a/skills_index.json b/skills_index.json index 4352f4f5..45cf497d 100644 --- a/skills_index.json +++ b/skills_index.json @@ -28262,6 +28262,138 @@ "reasons": [] } }, + { + "id": "ui-a11y", + "path": "skills/ui-a11y", + "category": "design", + "name": "ui-a11y", + "description": "Audit a StyleSeed-based component or page for WCAG 2.2 AA issues and apply practical accessibility fixes where the code makes them safe.", + "risk": "safe", + "source": "community", + "date_added": "2026-04-08", + "plugin": { + "targets": { + "codex": "supported", + "claude": "supported" + }, + "setup": { + "type": "none", + "summary": "", + "docs": null + }, + "reasons": [] + } + }, + { + "id": "ui-component", + "path": "skills/ui-component", + "category": "design", + "name": "ui-component", + "description": "Generate a new UI component that follows StyleSeed Toss conventions for structure, tokens, accessibility, and component ergonomics.", + "risk": "safe", + "source": "community", + "date_added": "2026-04-08", + "plugin": { + "targets": { + "codex": "supported", + "claude": "supported" + }, + "setup": { + "type": "none", + "summary": "", + "docs": null + }, + "reasons": [] + } + }, + { + "id": "ui-page", + "path": "skills/ui-page", + "category": "design", + "name": "ui-page", + "description": "Scaffold a new mobile-first page using StyleSeed Toss layout patterns, section rhythm, and existing shell components.", + "risk": "safe", + "source": "community", + "date_added": "2026-04-08", + "plugin": { + "targets": { + "codex": "supported", + "claude": "supported" + }, + "setup": { + "type": "none", + "summary": "", + "docs": null + }, + "reasons": [] + } + }, + { + "id": "ui-pattern", + "path": "skills/ui-pattern", + "category": "design", + "name": "ui-pattern", + "description": "Generate reusable UI patterns such as card sections, grids, lists, forms, and chart wrappers using StyleSeed Toss primitives.", + "risk": "safe", + "source": "community", + "date_added": "2026-04-08", + "plugin": { + "targets": { + "codex": "supported", + "claude": "supported" + }, + "setup": { + "type": "none", + "summary": "", + "docs": null + }, + "reasons": [] + } + }, + { + "id": "ui-review", + "path": "skills/ui-review", + "category": "design", + "name": "ui-review", + "description": "Review UI code for StyleSeed design-system compliance, accessibility, mobile ergonomics, spacing discipline, and implementation quality.", + "risk": "safe", + "source": "community", + "date_added": "2026-04-08", + "plugin": { + "targets": { + "codex": "supported", + "claude": "supported" + }, + "setup": { + "type": "none", + "summary": "", + "docs": null + }, + "reasons": [] + } + }, + { + "id": "ui-setup", + "path": "skills/ui-setup", + "category": "design", + "name": "ui-setup", + "description": "Interactive StyleSeed setup wizard for choosing app type, brand color, visual style, typography, and the first screen scaffold.", + "risk": "safe", + "source": "community", + "date_added": "2026-04-08", + "plugin": { + "targets": { + "codex": "supported", + "claude": "supported" + }, + "setup": { + "type": "none", + "summary": "", + "docs": null + }, + "reasons": [] + } + }, { "id": "ui-skills", "path": "skills/ui-skills", @@ -28284,6 +28416,28 @@ "reasons": [] } }, + { + "id": "ui-tokens", + "path": "skills/ui-tokens", + "category": "design", + "name": "ui-tokens", + "description": "List, add, and update StyleSeed design tokens while keeping JSON sources, CSS variables, and dark-mode values in sync.", + "risk": "safe", + "source": "community", + "date_added": "2026-04-08", + "plugin": { + "targets": { + "codex": "supported", + "claude": "supported" + }, + "setup": { + "type": "none", + "summary": "", + "docs": null + }, + "reasons": [] + } + }, { "id": "ui-ux-designer", "path": "skills/ui-ux-designer", @@ -28638,6 +28792,94 @@ "reasons": [] } }, + { + "id": "ux-audit", + "path": "skills/ux-audit", + "category": "design", + "name": "ux-audit", + "description": "Audit screens against Nielsen's heuristics and mobile UX best practices using the StyleSeed Toss design language as the implementation context.", + "risk": "safe", + "source": "community", + "date_added": "2026-04-08", + "plugin": { + "targets": { + "codex": "supported", + "claude": "supported" + }, + "setup": { + "type": "none", + "summary": "", + "docs": null + }, + "reasons": [] + } + }, + { + "id": "ux-copy", + "path": "skills/ux-copy", + "category": "design", + "name": "ux-copy", + "description": "Generate UX microcopy in StyleSeed's Toss-inspired voice for buttons, empty states, errors, toasts, confirmations, and form guidance.", + "risk": "safe", + "source": "community", + "date_added": "2026-04-08", + "plugin": { + "targets": { + "codex": "supported", + "claude": "supported" + }, + "setup": { + "type": "none", + "summary": "", + "docs": null + }, + "reasons": [] + } + }, + { + "id": "ux-feedback", + "path": "skills/ux-feedback", + "category": "design", + "name": "ux-feedback", + "description": "Add loading, empty, error, and success feedback states to StyleSeed components and pages with practical mobile-first rules.", + "risk": "safe", + "source": "community", + "date_added": "2026-04-08", + "plugin": { + "targets": { + "codex": "supported", + "claude": "supported" + }, + "setup": { + "type": "none", + "summary": "", + "docs": null + }, + "reasons": [] + } + }, + { + "id": "ux-flow", + "path": "skills/ux-flow", + "category": "design", + "name": "ux-flow", + "description": "Design user flows and screen structure using StyleSeed UX patterns such as progressive disclosure, hub-and-spoke navigation, and information pyramids.", + "risk": "safe", + "source": "community", + "date_added": "2026-04-08", + "plugin": { + "targets": { + "codex": "supported", + "claude": "supported" + }, + "setup": { + "type": "none", + "summary": "", + "docs": null + }, + "reasons": [] + } + }, { "id": "ux-persuasion-engineer", "path": "skills/ux-persuasion-engineer",