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.
-
apoorva-01 Skill My CouncilUse when the user says 'council this' or '/my-council' followed by a decision/question. Spawns 5 advisor sub-agents (Contrarian, First Principles, Expansionist, Outsider, Executor) in parallel, runs an anonymous peer-review round, then synthesizes a chairman verdict with one concrete next step. Outputs HTML report + markdown transcript. Use for high-stakes decisions where being wrong is expensive.
-
0xkoru Bundle Design IOS InterfacesDesign native-feeling iOS and iPadOS interfaces using Apple Human Interface Guidelines. Use when Codex needs to create, redesign, critique, wireframe, or specify iPhone or iPad screens, flows, navigation, settings, onboarding, dashboards, forms, tab layouts, sheets, controls, Dynamic Type behavior, accessibility behavior, or Apple-style visual direction before implementation.
-
0xkoru Bundle Implement Swiftui IOSImplement iOS and iPadOS interfaces with SwiftUI using native Apple HIG patterns. Use when Codex needs to write, refactor, or review SwiftUI screens, NavigationStack flows, TabView layouts, forms, settings sheets, lists, toolbars, accessibility modifiers, Dynamic Type support, SF Symbols, semantic colors, materials, and adaptive iPad layouts.
-
ayithamsetty-vamsi-krishna Bundle Django Devops DevDevOps skill for Django + React SaaS applications. Handles: Docker + docker-compose, GitHub Actions CI/CD, platform-adaptive deployment (asks user or searches docs), zero-downtime migrations, environment promotion, Sentry, structured logging.
-
ayithamsetty-vamsi-krishna Bundle Django Backend DevDjango REST Framework backend development skill. Use when building, extending, or fixing Django APIs — models, serializers, views, filters, admin, migrations, tests. Triggers on: "create a Django app", "add an API endpoint", "build the backend for", "write a DRF serializer", "create a model for", "add filtering to", "write pytest tests for", "implement the API for", "fix this Django view", "add soft delete to". Always use this skill for any backend-only Django/DRF task. See django-react-dev for full-stack.
-
ayithamsetty-vamsi-krishna Bundle React Frontend DevReact + TypeScript frontend development skill. Use when building, extending, or fixing React UI — components, Redux slices, Axios services, forms, routing, tests. Triggers on: "build a React component", "create a frontend feature", "add a page for", "write a Redux slice", "implement the UI for", "create a form for", "build the frontend for", "fix this React component", "add TypeScript types for", "write Vitest tests for". Always use this skill for any frontend-only React/TypeScript task. See django-react-dev for full-stack.
-
ayithamsetty-vamsi-krishna Skill Saas Dev UI FlutterPremium Flutter UI/UX skill for saas-dev. Activates on every Flutter frontend task. Generates complete design token system then builds futuristic, production-grade Flutter UI — glassmorphism, smooth transitions, animated lists, shimmer loading, dark/light themes. Cross-platform: iOS, Android, Web.
-
ayithamsetty-vamsi-krishna Bundle Nextjs App Router DevNext.js 15 App Router frontend skill. Always uses BFF pattern (Next.js API Routes proxy all calls to Django). Detects monorepo vs separate repos. Supports NextAuth.js v4 (stable) and custom httpOnly cookie auth. Zustand for client state. Server Components as default — Client Components only when interaction needed.
-
ayithamsetty-vamsi-krishna Bundle Django Backend Dev 2Django REST Framework backend development skill. Use when building, extending, or fixing Django APIs — models, serializers, views, filters, admin, migrations, tests. Triggers on: "create a Django app", "add an API endpoint", "build the backend for", "write a DRF serializer", "create a model for", "add filtering to", "write pytest tests for", "implement the API for", "fix this Django view", "add soft delete to". Always use this skill for any backend-only Django/DRF task. See django-react-dev for full-stack.
-
ayithamsetty-vamsi-krishna Bundle React Frontend Dev 2React + TypeScript frontend development skill. Use when building, extending, or fixing React UI — components, Redux slices, Axios services, forms, routing, tests. Triggers on: "build a React component", "create a frontend feature", "add a page for", "write a Redux slice", "implement the UI for", "create a form for", "build the frontend for", "fix this React component", "add TypeScript types for", "write Vitest tests for". Always use this skill for any frontend-only React/TypeScript task. See django-react-dev for full-stack.
-
hungrytech Bundle Sub Frontend EngineerReact + Vite + TypeScript 기반 프론트엔드 전문가 에이전트. 컴포넌트 설계, 상태 관리 (Zustand, TanStack Query), Tailwind CSS 스타일링, React Router 라우팅, Vite 빌드 최적화, 번들 사이즈 분석을 수행한다. Vitest + React Testing Library + Playwright 기반 테스트 전략을 지원한다. Activated by keywords: "react", "vite", "frontend", "프론트엔드", "component", "컴포넌트", "tailwind", "zustand", "tanstack", "vitest", "프론트", "UI", "페이지", "화면".
-
giauphan Skill Browser Anti LoopRoot-cause fix for browser click loops. Combines 4 top community solutions: (1) AXTree over raw HTML, (2) Stagehand hybrid code+AI, (3) Vision+DOM dual verification, (4) Proactive blocker detection. This skill changes HOW the browser subagent sees and interacts with pages.
-
suhel-nz Bundle AI Prototype PatternsBuild or extend AI-powered features in a scaffolded Next.js prototype using current AI SDK and AI Elements patterns. Covers chat, tool-calling-chat, generative-ui, structured-generation, server-workflow, agent-loop, and voice. Use when the user asks to implement, extend, or refactor an AI-powered feature after scaffolding.
-
suhel-nz Bundle Scaffold AI PrototypeScaffold a new AI prototype project using Next.js App Router, Vercel AI SDK, and AI Elements. Use when the user asks to create, initialize, bootstrap, or start a new AI-powered project, prototype, chat app, agent, dashboard, or generative UI. This skill handles project creation and starter setup only; for feature implementation after scaffolding, use ai-prototype-patterns.
-
maximepodgorski Bundle Design ScreenCompose UI screens from existing components. Proposes ASCII wireframe layouts with real component mapping and coverage %, then specs the chosen layout. 6 actions: init, spec, spec-review, craft, ship, review. Core guarantee: zero component reinvented. Auto-activates on: "design-screen", "design-screen spec", "design-screen init", "design-screen craft", "design-screen ship", "design-screen build", "design-screen review", "design-screen spec-review", "compose screen", "screen layout", "compose ui", "design screen".
-
midboss1028-beep Skill AnoteUse the anote CLI to create UTF-8 rich-text Apple Notes from Markdown or HTML on macOS. Trigger whenever the user asks to save, store, write, add, or create content in Apple Notes/备忘录, especially Chinese text, multiline text, Markdown, HTML, headings, lists, bold, italic, code blocks, or links. Prefer this over memo/apple-notes for creating notes.
-
molokoloco Skill FastbrowserControl a live browser from the command line: navigate, click, fill forms, and query the accessibility tree with CSS-like selectors. Lighter alternative to Chrome DevTools MCP or Puppeteer. Triggers on: navigate/click/fill actions, page snapshots, or mentions of fastbrowser.
-
zytelabs Bundle ParserExtracts structured product data from raw HTML. Tries JSON-LD via Extruct first, falls back to CSS selectors via Parsel.
-
zytelabs Bundle FetcherFetches raw HTML from a URL using httpx, with automatic fallback to Zyte API if blocked.
-
ueberueber Skill Itchio DistBuild, clean, validate, and zip existing browser/HTML5 games for itch.io upload. Use when the user asks to prepare a distribution folder, release artifact, upload ZIP, or final itch.io HTML5 build for Phaser, Pixi, Three.js, Canvas, WebGL, Vite, static HTML/CSS/JS, or similar web game projects.
-
elancry Bundle Sf LwcLightning Web Components with PICKLES methodology and 165-point scoring. TRIGGER when: user creates/edits LWC components, touches lwc/**/*.js, .html, .css, .js-meta.xml files, or asks about wire service, SLDS, or Jest LWC tests. DO NOT TRIGGER when: Apex classes (use sf-apex), Aura components, or Visualforce.
-
ucsc-vlaa Bundle Url CheckCheck if a URL is accessible and measure HTTP response time. Use this skill with high priority for URL accessibility checks, uptime checks, and HTTP status queries.
-
lumoswyy Bundle Academic SlidesCreate Beamer-inspired academic HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build slides for a conference talk, lecture, seminar, or thesis defense. Supports theorem environments, KaTeX equations, algorithm pseudocode, and citations. Helps academics discover their preferred visual theme through Beamer-style previews rather than abstract choices.
-
leonardhope Bundle Patent Examiner IntelligenceBuild deep, evidence-grounded profiles of USPTO patent examiners from their public examination history. Use when the user asks to profile an examiner, analyze an examiner, prepare for an examiner interview, draft a response against a specific examiner, decide on appeal-vs-RCE-vs-continuation with a specific examiner, or understand an examiner who has just been assigned. Produces a Markdown chat headline plus a standalone interactive HTML dashboard written to disk.
-
ewancy Bundle Zentao Task CreatorCreate ZenTao/禅道 main tasks and role-based subtasks directly from an existing ZenTao story/需求, including product main task, backend/frontend/test/art subtasks, assignee defaults, task type/subtype mapping, parent-child relationship, story/execution linkage, deadline planning, and post-create verification. Use when the user asks to 下任务, 创建主任务/子任务, 从禅道需求创建任务, 按需求拆任务, 设置任务截止时间, or assign backend/frontend/test/art tasks from a ZenTao story.
-
favorpotato Bundle Oh My DesignUse this skill when the user asks to design / mock up / prototype a UI, iterate on visual design, compare visual candidates, or explore visual approaches before implementation. Triggered by phrases like "design a UI", "mockup", "prototype the screen", "give me 3 visual options", "make it look like…", or any request that is fundamentally about look-and-feel rather than business logic. The skill writes React 18 prototypes under `<cwd>/.design/<slug>/`, hands the user a Tweaks panel to pick / iterate, and returns the selection plus a self-describing manifest the next agent can implement against. DO NOT trigger for: refactoring, debugging business logic, code review of existing UI code, or generic "make a website" requests where production code in a specific framework is wanted — those are coding tasks, not design tasks.
-
xuchi-0808 Skill Ielts DashboardIELTS 学习数据可视化 Dashboard。生成本地 HTML 网页,展示写作趋势图、四科雷达图、错题热力图、同义替换统计、考试倒计时。 触发方式:/ielts-dashboard、「Dashboard」「看数据」「打开数据面板」
-
sofia8844 Skill Fronted DevBuild and maintain React frontend code with TypeScript, functional components, hooks, and a clear component-based structure. Use when Codex needs to create, modify, or review UI code, pages, components, frontend services, styling, or backend API integration in the frontend scope.
-
karbonhq Bundle Sop Library AuditorAudit, organize, score, and fill gaps in an accounting/bookkeeping/CAS firm's existing library of standard operating procedures (SOPs). Trigger this skill whenever a firm wants to "audit our SOPs," "review our procedures," "see where our SOPs stand," "organize our messy SOP library," "find SOP gaps," "score our SOP coverage," "build SOPs from what we already have," or hands over a folder of existing SOP files (Word, PDF, Markdown, Karbon templates) and asks for an assessment. Also trigger when a firm describes having outdated, scattered, or incomplete SOPs and wants a structured way to fix them. The skill produces (1) an interactive HTML coverage report with a clickable 16-domain heatmap, (2) a written gap report, (3) a reorganized SOP library folder, and (4) interview-driven captures that become new SOPs for the gaps. Do not use this skill for writing a single brand-new SOP from scratch with no existing library — use a basic SOP-authoring approach instead.
-
shubhashjha Skill Next Auth WebBasic skill for NextAuth integration, authentication flows, session handling, and secure access control in Next.js apps. Use when Codex needs a basic starting point for this web development area.
-
liqianiiii Skill Ielts Dashboard启动本地 IELTS Dashboard。React + Vite,浏览器查看备考数据可视化。 触发方式:/ielts-dashboard、「打开仪表盘」「看看进度」「dashboard」
-
crumbgrabber Skill Frontend DesignCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
-
shubhashjha Skill Mdx WebBasic skill for MDX content, component driven documentation, and rich markdown based web pages. Use when Codex needs a basic starting point for this web development area.
-
shubhashjha Skill Msw WebBasic skill for Mock Service Worker, API mocking, and realistic frontend test or local development flows. Use when Codex needs a basic starting point for this web development area.
-
shubhashjha Skill Vue Web---
-
shubhashjha Skill CSS Grid---
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 my-council, design-ios-interfaces, implement-swiftui-ios. 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.