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.
-
tomevault-io Bundle Geoffreycrofte Luxembourg Accessibility Skillset LuxembourgRAWeb 1.1 — Accessibility Audit Skill
- tomevault-io Bundle Documentation Bc Architecture Generator
Create well-structured Business Central architecture documents in the `openspec/architecture/` folder as the long-lived companion to an existing approved technical spec, following the ARCH-001 template structure. Captures business and technical context, architectural drivers traced back to user-story ACs, numbered Architecture Decision Records (ADR-N) with Context/Decision/Consequence/Alternatives-rejected, a logical component view (ASCII or mermaid), key runtime flows, data architecture (entity-relationship + storage/ownership/key-derivation tables), cross-cutting concerns (security, reliability, performance, observability, localisation, RapidStart/portability, upgrade/migration), coexistence with legacy code, and known constraints/limitations. Writes the file as `ARCH-NNN-<kebab-title>.architecture.md` with frontmatter linking back to its spec, user story, and CCN. Use whenever the user asks to create, draft, generate, or write an architecture document, ARCH document, ADR, design rationale, or technical com
- tomevault-io Bundle Tryboy869 Dojutsu For AI Nextjs15 React19 Vercelai Tailwind
nextjs15-react19-vercelai-tailwind-cursorrules-prompt-file
- tomevault-io Bundle Nextjs React Typescript Cursorrules Prompt File Cursorrules
Apply for nextjs-react-typescript-cursorrules-prompt-file. You are an expert in Solidity, TypeScript, Node.js, Next.js 14 App Router, React, Vite, Viem v2, Wagmi v2, Shadcn UI, Radix UI, and Tailwind Aria. Key Principles - Write concise, technical responses w Use when this capability is needed.
- tomevault-io Bundle Codebase Architecture Analysis
Analyze a GitHub codebase to create comprehensive architecture documentation including ASCII diagrams, component relationships, data flow, hosting infrastructure, and file structure assessment. Use when this capability is needed.
- tomevault-io Bundle Tryboy869 Dojutsu For AI React Native Expo Router Typescript
react-native-expo-router-typescript-windows-cursorrules-prompt-file
- tomevault-io Bundle Typescript Vite Tailwind Cursorrules Prompt File Cursorrules
Apply for typescript-vite-tailwind-cursorrules-prompt-file. You are an expert in TypeScript, Node.js, Vite, Vue.js, Vue Router, Pinia, VueUse, DaisyUI, and Tailwind, with a deep understanding of best practices and performance optimization techniques in these t Use when this capability is needed.
- tomevault-io Bundle Tryboy869 Dojutsu For AI Vue 3 Nuxt 3 Development Cursorrule
vue-3-nuxt-3-development-cursorrules-prompt-file
- tomevault-io Bundle UI CSS Patterns
UI/CSS design patterns and component reference for the RAPID frontend, covering color semantics, button variant selection, status badge colors, dark mode, spacing, and component inventory. Use when implementing UI components, choosing button variants or colors, styling with Tailwind CSS, or checking available shared components. Use when this capability is needed.
- tomevault-io Bundle Build And Format
Run build verification and code formatting across all RAPID project components (backend, frontend, CDK). Use after implementing code changes, before committing, after modifying Prisma schema, or before creating a pull request. Use when this capability is needed.
- tomevault-io Bundle Cursor AI React Typescript Shadcn UI Cursorrules P Cursorrul
Apply for cursor-ai-react-typescript-shadcn-ui-cursorrules-p. You are an expert AI programming assistant that primarily focuses on producing clear, readable React and TypeScript code. You always use the latest stable version of TypeScript, JavaScript, React, Nod Use when this capability is needed.
- tomevault-io Bundle Javascript Astro Tailwind CSS Cursorrules Prompt F Cursorrul
Apply for javascript-astro-tailwind-css-cursorrules-prompt-f. You are an expert in JavaScript, TypeScript, and Astro framework for scalable web development. Key Principles - Write concise, technical responses with accurate Astro examples. Use when this capability is needed.
- tomevault-io Bundle Typescript Nodejs Nextjs React UI CSS Cursorrules Cursorrule
Apply for typescript-nodejs-nextjs-react-ui-css-cursorrules-. You are an expert in TypeScript, Node.js, Next.js App Router, React, Shadcn UI, Radix UI and Tailwind. Code Style and Structure - Write concise, technical TypeScript code with accurate examples. Use when this capability is needed.
- tomevault-io Bundle Tryboy869 Dojutsu For AI Typescript React Nextjs Cloudflare
typescript-react-nextjs-cloudflare-cursorrules-pro
- tomevault-io Bundle React Node UI Clean Architecture
Use this skill when building or refactoring a React application served by Node.js that acts as the human interface layer and calls backend APIs. It is for UI plus BFF style systems where React handles presentation, Node serves assets and optionally hosts HTTP endpoints, and business workflows are isolated from React components, fetch calls, Express request objects, and backend contracts.
- tomevault-io Bundle Develop Component
コンポーネントを新規作成・更新する。CSS、HTML、Storybook Stories、テスト、JavaScript（Custom Elements）の実装を含む。 Use when this capability is needed.
- tomevault-io Bundle Documentation Component Documentation Storybook
Imported TRAE skill from documentation/Component_Documentation_Storybook.md Use when this capability is needed.
- tomevault-io Bundle Providing Performance Optimization Advice
Provide comprehensive prioritized performance optimization recommendations for frontend, backend, and infrastructure. Use when analyzing bottlenecks or seeking improvement strategies. Trigger with phrases like "optimize performance", "improve speed", or "performance recommendations". Use when this capability is needed.
- tomevault-io Bundle Pre Completion Check
Run the pre-completion checks before declaring a task done. Executes lint, markup lint, build (tsc), tests, and reminds the user to verify Storybook visually. Use when this capability is needed.
- tomevault-io Bundle Plan Backend Frontend
Create implementation plans for backend API endpoints and frontend features following RAPID layered architecture (domain/usecase/routes pattern, SWR hooks, feature-based organization). Use when adding or modifying backend APIs, frontend components, database schemas, or repository implementations. Also use for refactoring backend/frontend code. Use when this capability is needed.
- tomevault-io Bundle Wechat Article Formatter
将Markdown文章转换为美化的HTML格式，适配微信公众号发布。应用专业CSS样式、代码高亮、优化排版。当用户说"美化这篇文章"、"转换为HTML"、"优化公众号格式"、"生成公众号HTML"时使用。 Use when this capability is needed.
- tomevault-io Bundle Sample AI Powered Sdlc Patterns With AWS
Domain-specific guidance for building React applications with Vite. Use when this capability is needed.
- tomevault-io Bundle Incremental Detail Design Diagramming C4 Approach
Use when working with the C4 model (Context, Container, Component, Code) is a lightweight hierarchical technique for structuring software architecture diagrams. It favors progressive disclosure of technical detail so st...
- tomevault-io Bundle Sushegaad Claude Skills Governance Risk And Compliance Claud
Web Content Accessibility Guidelines (WCAG) Skill
- tomevault-io Bundle Nextjs Conventions
Next.js App Router patterns, conventions, and best practices. Use when building or reviewing Next.js components, pages, routes, or configuration. Use when this capability is needed.
- tomevault-io Bundle Investigating Codebases
Automatically activated when user asks how something works, wants to understand unfamiliar code, needs to explore a new codebase, or asks questions like "where is X implemented?", "how does Y work?", or "explain the Z component Use when this capability is needed.
- tomevault-io Bundle Chrome Devtools Webapp Debug
Repeatable workflows for debugging web application issues using Chrome DevTools MCP. Use when this capability is needed.
- tomevault-io Bundle Jeremylongshore Claude Code Plugins Plus Skills Vue Composab
Vue Composable Creator
- tomevault-io Bundle Tailwindcss Advanced Components
Tailwind CSS advanced component patterns with CVA integration and variant management Use when this capability is needed.
- tomevault-io Bundle Tailwindcss Responsive Darkmode
Tailwind CSS responsive design and dark mode implementation patterns for 2025/2026 Use when this capability is needed.
- tomevault-io Bundle API Endpoint Scaffold
Scaffold new Next.js API endpoints with authentication, rate limiting, and tests. Use when creating new API routes, adding endpoints, or building API features. Use when this capability is needed.
- tomevault-io Bundle Jeremylongshore Claude Code Plugins Plus Skills Vue Componen
Vue Component Generator
- tomevault-io Bundle Style Modus Components With Tailwind
Style Modus components using custom border and opacity utilities that work with CSS variables, avoiding Tailwind patterns that don't work with runtime CSS variables Use when this capability is needed.
- tomevault-io Bundle Javascript Chrome Apis Cursorrules Prompt File
Apply for javascript-chrome-apis-cursorrules-prompt-file. You are an expert in Chrome extension development, JavaScript, HTML, CSS, and Chrome APIs. Code Style and Structure Naming Conventions Use when this capability is needed.
- tomevault-io Bundle Apps Ayokoding Web Developing Content
Comprehensive guide for creating content on ayokoding-web, a Next.js 16 fullstack content platform (ayokoding-web). Covers bilingual content strategy (default English), tRPC API, content workflow, and ayokoding-web specific patterns. Essential for content creation tasks on ayokoding-web Use when this capability is needed.
- tomevault-io Bundle Dioxus Rust Fullstack Cross Platform Application Framework
Dioxus is a fullstack app framework for Rust that enables building cross-platform applications for web, desktop, and mobile from a single codebase. With 24k+ GitHub stars and an active Rust community, it combines React-like ergonomics with Rust performance and type safety. Use when this capability is needed.
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 geoffreycrofte--luxembourg-accessibility-skillset--luxembourg-accessibility-skillset, documentation-bc-architecture-generator, tryboy869--dojutsu-for-ai--nextjs15-react19-vercelai-tailwind-cursorrules-prompt-file. 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.