Web & Frontend
Web development agent skills handle frontend and full-stack work: component patterns, CSS and accessibility fixes, performance budgets, and framework conventions. Install a skill once and your AI agent follows the same playbook in every project, from quick prototypes to production apps.
-
leookun Bundle FrontendImplement and review the Cursor BYOK React/Tauri desktop frontend. Use for changes under apps/desktop involving routing, page layout, window chrome, settings UI, scrolling, virtualization, charts, themes, or frontend component architecture.
-
leookun Skill Model SelectionImplement and review desktop selection of configured models through the unified grouped ModelSelect component. Use when adding or changing model dropdowns, model filters, Commit model settings, single-model selection, multi-model selection, provider grouping, or configured-model option construction under apps/desktop.
-
livlign Bundle Repo Visuals RetroRetrospective meta-skill for the `repo-visuals` skill. Reads accumulated evaluation logs from past runs, spots patterns (recurring low-score criteria, repeated iteration failures, unsatisfied requests), consults other expert skills (skill-creator, frontend-design, etc.) where relevant, and proposes concrete edits to `repo-visuals/SKILL.md` as a reviewable diff. Runs on-demand, not per run.
-
liyingsong99 Skill Aibridge Prefab PatchUnity Prefab asset patch workflow for AIBridge. Use when modifying complex prefab assets with prefab patch operations, child or component creation, SerializedProperty writes, array edits, internal GameObject/component references, dry-run validation, or when deciding between prefab patch, inspector set_property, scene object commands, and direct Unity YAML fallback
-
devotts Skill Deploy VerifyStaging/prod deploy verification — proves the build actually works in the live environment, not that a dashboard says "Ready". Runs the deployed-code ladder (curl the new route, grep served HTML, digest-pin — merged ≠ deployable ≠ deployed), re-runs the Test Contract's [REAL]-tagged cases against the live env under Tier-2 rules, walks the release checklist (rollback, monitoring, feature flags, migration safety, credential hygiene), and emits READY / NOT-READY with per-item evidence. Invoked by /review-it when the target is "staging"/"prod"/a release, or standalone when the user says "verify the deploy", "is it actually live", "pre-release check", "can we ship this".
-
docyrus Bundle Docyrus Dashboard DesignBuild Docyrus dashboards, analytics pages, KPI/metric views, and reporting screens with a fixed, opinionated component stack — Bklit UI for ALL charts/data-viz, AwesomeCard for ALL dashboard cards/panels, and AwesomeStats for ALL stat/metric/KPI cards. Use when creating or refactoring a dashboard, analytics view, reporting page, KPI grid, metric strip, overview/home screen, or any data-visualization layout in a Docyrus-backed React app. Triggers on "dashboard", "analytics page", "stat cards", "KPI cards", "metric cards", "charts", "data visualization", "reporting screen", "overview page", AwesomeCard, AwesomeStats, bklit, or chart composition. This skill OVERRIDES the default "Recharts / shadcn chart" and generic-card guidance from docyrus-app-dev-react.
-
docyrus Bundle Docyrus UI React ComponentsCatalog of every @docyrus/ui React (web) component and hook — descriptions, import paths, and per-component llms.txt documentation links. Use when picking a Docyrus UI component for a feature, discovering what @docyrus/ui ships, installing a component via the CLI, or before wiring any DataGrid / form / calendar / kanban / editor / panel / picker component so you can fetch its exact API from the docs. Triggers on "which Docyrus component", "is there a @docyrus/ui component for…", "add a Docyrus UI component", "list Docyrus components", or any @docyrus/ui component/hook lookup.
-
docyrus Bundle Docyrus Data Grid Page DesignBuild Docyrus React data-grid and record-list pages with `DataGrid`, `DataGridViewSelect`, `useDataGrid`, `useDocyrusDataViewSelect`, and `useDocyrusDataGrid`. Use when asked to build or refactor a list page, records table, CRM or ERP grid, saved-view tabs, row actions, manual DataGrid toolbar composition, or Docyrus data-source grid queries with filtering, sorting, grouping, search, display modes, paging, and reload behavior.
-
docyrus Bundle Docyrus Record Detail Form DesignBuild Docyrus React record forms, detail sheets, inspector panels, and inline-edit record UIs with `useDocyrusFormView`, `DynamicFormField`, `DynamicValue`, `EditableRecordDetail`, `EditableValue`, and value renderers. Use when asked to create or refactor create/edit/view pages, modal or sheet record forms, click-to-edit detail panels, metadata-driven field layouts, manual read-only record summaries, or field-type mapping logic that must choose correctly between form inputs, inline editors, and value-renderer fallbacks.
-
dreamhunter2333 Skill Cf Temp Mail Upgrade DependenciesUpgrade npm dependencies across all sub-packages of the project. Use when the user asks to upgrade/update dependencies, bump deps, refresh lockfiles, or update wrangler. Runs pnpm upgrades on frontend/, worker/, pages/, and vitepress-docs/, plus npm upgrades on e2e/.
-
enigmatry Skill A11YGuidance for creating accessible code conforming to WCAG 2.2 Level AA. Use this when building or reviewing UI components, forms, navigation, or any user-facing HTML/Angular templates.
-
entropy-cloud Bundle Nop Ppt GeneratorUse when generating HTML-based presentation slides from a .ppt.md outline file. Triggers on "generate ppt", "生成ppt", "make slides", "presentation from outline".
-
epam Skill Quality GatesRun the standard npm lint, test, format, and build checks expected before sharing dial-mind-map-frontend changes.
-
epam Skill Feature DeliveryEnd-to-end feature work across Next.js UI, Redux store, tests, and verification commands for this repo.
-
epam Skill Match Repo StyleAlign new edits with neighboring files—imports, Redux epics, Next.js patterns, and Tailwind rules in dial-mind-map-frontend.
-
evilmartians Skill Tailwind Best PracticesWrite Tailwind CSS following practices that keep a fast-to-write codebase maintainable — use design tokens instead of magic values, keep class lists short, group tokens semantically, generate classes in consistent order, avoid @apply for extracting repeated styles, and use fixed variants instead of arbitrary className props. Use this whenever writing or editing Tailwind classes, components, or config, and also when reviewing, cleaning up, refactoring, or auditing an existing Tailwind project. Do NOT use for general CSS architecture unrelated to Tailwind, or for build tooling unrelated to CSS output (bundlers, JS minification, etc.).
-
amrtawfik160 Bundle Show MeHelp the user understand the current topic visually with concise diagrams, code-shape sketches, and focused HTML artifacts. Use when they ask to see it, diagram it, sketch the shape, or show the flow.
-
ardanlabs Bundle Review PrService Diffguard: read-only PR review lenses for correctness, error visibility, comment truthfulness, test coverage, type/contract boundaries, and simplification across every language in this repo (Go, Vue/JS/SCSS, Rego, protobuf, SQL, Helm/YAML, shell). Use for PR review, pre-commit review, unstaged-diff review, or a targeted review of one of those aspects.
-
artmsilva Skill Inspect OutputThis skill should be used when the user asks to "inspect CSS output", "show generated CSS", "debug styles", "see what CSS is generated", "view layer structure", or wants to understand what CSS Seams produces for a component.
-
artmsilva Skill Check Rsc CompatThis skill should be used when the user asks to "check RSC compatibility", "verify server component support", "is this RSC safe", "will this work in server components", "audit for client-side code", or wants to verify components work with React Server Components.
-
artmsilva Skill Debug ExtractionThis skill should be used when the user asks to "debug extraction", "why isn't CSS being extracted", "build plugin not working", "styles missing after build", "analyze AST", or needs to troubleshoot the build-time CSS extraction pipeline.
-
artmsilva Bundle Migrate StitchesThis skill should be used when the user asks to "migrate from Stitches", "convert Stitches to RSC", "upgrade to Seams", "replace @stitches/react", or mentions migrating existing Stitches.js code to Seams.
-
mixedbread-ai Skill Mixedbread ParsingParse documents, extract structured content, and run OCR using the Mixedbread Parsing API. Use when parsing PDFs, Word documents, PowerPoint slides, or images, extracting tables or form fields, running OCR on scanned documents, converting documents to markdown or HTML, or extracting structured chunks with element-level bounding boxes and confidence scores.
-
mofirojean Bundle Primeng DeveloperGenerates PrimeNG code and guidance for Angular projects using `primeng` with `@primeuix/themes` and `@primeuix/styles`. Covers installation, design-token theming (Aura / Lara / Nora / Material presets), Styled vs Unstyled modes, the PassThrough (`pt`) customization API, component usage across all categories (form controls, buttons, overlays, layout, data display, display, menus), ReactiveForms / Signal Forms integration, accessibility, and v18→v22 migration renames. Use when the user mentions PrimeNG, `primeng`, `p-*` components, Aura/Lara/Nora theme presets, OR when the Angular project's `package.json` contains `primeng` or `@primeuix/*` dependencies. Pairs with `angular-developer` for Angular fundamentals.
-
mofirojean Bundle Ng Zorro DeveloperGenerates NG-ZORRO code and guidance for Angular projects using `ng-zorro-antd`. Covers installation, LESS-variable theming (default, dark, compact, aliyun presets), the experimental dynamic CSS-variable theme, component usage across all categories (general, layout, navigation, data entry, data display, feedback), ReactiveForms / Signal Forms integration via `nz-form`, internationalisation (`provideNzI18n`), accessibility, and the module → standalone migration. Use when the user mentions NG-ZORRO, ng-zorro, ng-zorro-antd, Ant Design for Angular, `nz-*` components, `Nz*Module`, OR when the Angular project's `package.json` contains `ng-zorro-antd`. Pairs with `angular-developer` for Angular fundamentals.
-
mofirojean Bundle Spartan Ng DeveloperGenerates Spartan/ng UI code and guidance for Angular projects using @spartan-ng/helm (styled components copied into the repo) and @spartan-ng/brain (headless primitives). Covers installation, Tailwind v4 theming, component usage across all categories (forms, overlays, layout, display, data), Brain primitives, ReactiveForms / Signal Forms integration, and accessibility. Use when the user mentions Spartan, spartan-ng, @spartan-ng, hlm-* or brn-* components, OR when the Angular project's package.json contains @spartan-ng/* dependencies. Pairs with angular-developer for Angular fundamentals.
-
moonshine-software Skill Moonshine ComponentCreate custom MoonShine display components for dashboards, widgets, badges, and UI decoration. Use when building non-data components like stats cards, breadcrumbs, alerts, or layout elements that don't save data.
-
moonshine-software Skill Moonshine ComponentsBuild MoonShine admin panel UI with Blade components — tables, forms, cards, modals, navigation, and page layouts. Use when creating admin interfaces, data tables with actions, form layouts, or any UI using MoonShine's component library.
-
moostjs Bundle Atscript UIGeneral awareness skill for the atscript-ui ecosystem — UI rendered from `.as` annotated types. Use when working with `@atscript/ui`, `@atscript/ui-fns`, or `@atscript/ui-table` framework-agnostic primitives (FormDef, TableDef, FieldResolver, FilterCondition, PresetSnapshot, buildTableQuery, ValueHelpClient, buildModelRoutes — app nav/routes from DB models); when looking up the full `@ui.*` / `@ui.form.*` / `@ui.table.*` / `@ui.dict.*` / `@ui.nav.*` / `@ui.type` / `@wf.*` annotation reference; when wiring `installDynamicResolver()` from `@atscript/ui-fns`; when porting the engine to a non-Vue framework (React, Svelte); or when deciding which specialized atscript-ui skill to load (forms / tables / wf / styles). Scope is cross-cutting and framework-agnostic. Out of scope: `.as` syntax, `@meta.*`, `@expect.*`, `asc`, `unplugin-atscript`, VSCode LSP (use the `atscript` skill); `@db.*`, DbSpace, adapters, `moost-db`, browser `Client` (use the `atscript-db` skill); Vue components (use the per-domain skill).
-
moostjs Bundle Atscript UI WfBuild HTTP round-trip multi-step workflow forms with `@atscript/vue-wf` (client) + `@atscript/moost-wf` (server). Use when working with `<AsWfForm>` or `useWfForm` on the client; when declaring server flows via `@Workflow` / `@Step` / `@WorkflowSchema` / `@WfInput` / `@WfAction` on top of `@moostjs/event-wf`; when calling `useAtscriptWf(Type)` inside step handlers; when serializing forms (`serializeFormSchema`, `extractPassContext`) or passing context across steps via `@wf.context.pass`; when implementing action-with-data via `@wf.action.withData`; when persisting workflow state via `AsWfStore` + `@wf.store.fromContext` shadow columns; when implementing outlets (email magic link, webhook) with resume via `initialToken`; when emitting a `WfFinished` envelope via `finishWf` / `abortWf`; or when overriding the `<AsWfFinish>` finish-screen slots and `navigate` prop. Out of scope: plain forms (use `atscript-ui-forms`), tables (use `atscript-ui-tables`), styling (use `atscript-ui-styles`).
-
moostjs Bundle Atscript UI FormsRender forms from `.as` types with `@atscript/vue-form`. Use with `<AsForm>`, `<AsField>`, `<AsIterator>`; for `.as` types with `@ui.form.*` / `@ui.form.fn.*`; for validation (`@meta.required`, `@expect.*`, `@ui.form.validate`); for arrays, nested objects, unions, tuples; for form actions (`@ui.form.action`) or FK value-help (`@db.rel.FK` → `AsRef`); for change tracking — dirty state, an `@atscript/db` patch, per-field dirty (mark changed fields), or a 3-way rebase folding fresh server data into unsaved edits (`track-changes`, `useAsFormPatch`, `getPatch`, `$cas`, `isPathDirty`, `isDirtyPath`, `useAsField().isDirty`, `data-dirty`, `rebaseOnto`); to override defaults (`:types` / `:components`); for custom fields (`TAsComponentProps`, `AsFieldShell`, `@atscript/vue-aooth`); or `useAsForm` / `useAsField` / `useAsArray` / `useAsUnion` / `useAsTuple`. Out of scope: tables (`atscript-ui-tables`), HTTP workflow forms (`atscript-ui-wf`), styling (`atscript-ui-styles`), `createFormDef` (general `atscript-ui` skill).
-
moostjs Bundle Atscript UI TablesRender searchable, filterable, sortable, paginated, or virtualized tables from `.as` annotated types with `@atscript/vue-table` + `@atscript/ui-table`. Use when working with `<AsTableRoot>`, `<AsTable>`, `<AsWindowTable>`, `<AsFilters>`, `<AsPresetPicker>`, `<AsConfigDialog>`, or `<AsTableActions>`; when writing `@ui.table.*` / `@ui.table.fn.*` / `@ui.dict.*` annotations; when wiring a custom `queryFn` or a `moost-db` URL; when building custom cells via `@ui.table.component` + `:components` (and `provideCellLocale`); when persisting state to the URL (`useTableUrlQuery`) or to presets (`usePresets`, `useLocalDraft`, `useAppPrefs`, `AsPresetPicker`), including server-side via `AsPresetsController` from `@atscript/moost-ui-presets`; when wiring row/table actions (`AsActionFormDialog`) and selection (`togglePk`, `trimSelection`); or when tuning virtualization and block-aligned fetching. Out of scope: forms (use `atscript-ui-forms`), workflow forms (use `atscript-ui-wf`), styling (use `atscript-ui-styles`).
-
mudrii Skill Frontend DashboardUse this skill when editing the embedded dashboard frontend in this repository. It focuses on preserving the single-file embedded SPA model, keeping the UI lightweight, and avoiding unnecessary frontend tooling or dependencies.
-
nativewind Skill TriageTriage a Nativewind or react-native-css GitHub issue. Reads the issue, determines version/repo, creates a reproduction, tests against latest published and local HEAD, then drafts a comment.
-
nativewind Skill Add TestScaffold a test for a Tailwind utility or Nativewind feature following the project's testing conventions.
-
nativewind Skill ArchitectureExplain the Nativewind v5 architecture, CSS pipeline, and key files. Use when a contributor wants to understand how the codebase works.
Frequently asked questions
What are Web & Frontend agent skills?
Web development agent skills handle frontend and full-stack work: component patterns, CSS and accessibility fixes, performance budgets, and framework conventions. Install a skill once and your AI agent follows the same playbook in every project, from quick prototypes to production apps.
Which Web & Frontend skills are most installed?
Popular Web & Frontend skills on SkillMD right now include frontend, model-selection, repo-visuals-retro. Rankings shift as installs change; sort this page by "Most installs" for the live list.
Do Web & Frontend skills work with Claude Code and Cursor?
Yes. Every skill here ships as a SKILL.md file, an open format that works in Claude Code, Claude.ai, Cursor, Codex, Windsurf, and 60+ other agents. Install one with npx skillmds@latest add <owner>/<name>, or copy the file into your agent's skills directory.