Agent Skills, Assets and Tools for Web Design

# Web design: what to use (AgentGid, 2026-10-23)

## Agent Skills (install once)
- npx skills add Leonxlnx/taste-skill --skill design-taste-frontend  # design-taste-frontend: tasteskill v2, the anti-slop frontend skill. Art direction for websites, distilled from a 
- npx skills add huytieu/COG-second-brain --skill product-ui-taste  # product-ui-taste: Anti-slop skill for PRODUCT UI - dashboards, data tables, forms, multi-step flows, setting
- npx skills add huytieu/COG-second-brain --skill taste-skill  # taste-skill: Anti-slop frontend skill for landing pages, portfolios, and redesigns. The agent reads the
- npx skills add nextlevelbuilder/ui-ux-pro-max-skill --skill ui-styling  # ui-styling: Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI 
- npx skills add nextlevelbuilder/ui-ux-pro-max-skill --skill ui-ux-pro-max  # ui-ux-pro-max: UI/UX design intelligence for web, mobile, and desktop. This skill should be used when des
- npx skills add openai/skills --skill figma-create-design-system-rules  # figma-create-design-system-rules: Generates custom design system rules for the user's codebase. Use when user says "create d
- npx skills add openai/skills --skill figma-generate-library  # figma-generate-library: Build or update a professional-grade design system in Figma from a codebase. Use when the 
- npx skills add android/skills --skill styles  # styles: Use this skill to integrate the Jetpack Compose Styles API into an Android project. This s
- npx skills add fengshao1227/ccg-workflow --skill frontend-design  # frontend-design: Frontend design skill fused from Impeccable + custom extensions. Covers design philosophy,
- npx skills add fengshao1227/ccg-workflow --skill claymorphism  # claymorphism: Claymorphism design system skill. Use when building soft, puffy, clay-like UI components w

## Libraries
- npm install lucide-react  # Lucide React, Gid Score 86
- npm install @radix-ui/react-slot  # Radix UI, Gid Score 84
- npm install shadcn  # shadcn/ui, Gid Score 81
- npm install sonner  # Sonner, Gid Score 79
- npm install class-variance-authority  # Class Variance Authority, Gid Score 79
- npm install tailwindcss  # Tailwind CSS, Gid Score 91
- npm install tailwind-merge  # Tailwind Merge, Gid Score 79
- npm install @emotion/react  # Emotion, Gid Score 72

## Content sources (follow each license line)
- shadcn/ui (UI kits and website templates). Open-source set of accessible React components and blocks that you copy into your own codebase through a CLI and registries. Price: free; commercial use OK; no credit needed. Style: minimal, monochrome, flat.
  Connect: official MCP server https://ui.shadcn.com/docs/mcp; npm shadcn.
  Get files: npx shadcn@latest init, then npx shadcn@latest add <component or block>; official MCP: pnpm dlx shadcn@latest mcp init --client claude (html, css, json).
  Not allowed: Needs React and Tailwind CSS
  Not allowed: Third-party registry items carry their own licences
  Rule: Keep the MIT notice if you redistribute the code.
  Rule: Third-party registries listed in the directory have their own licences; check each.
  License: https://raw.githubusercontent.com/shadcn-ui/ui/main/LICENSE.md (checked 2026-10-21; details: https://agentgid.com/assets/shadcn-ui/)
- daisyUI (UI kits and website templates). Free Tailwind CSS plugin that adds semantic component class names (btn, card, ..) and themes; paid templates, charts and a Figma library are sold in a separate store. Price: free tier; commercial use OK; no credit needed. Style: colorful, playful, flat.
  Connect: npm daisyui.
  Get files: npm i -D daisyui@latest, then in CSS: @import "tailwindcss"; @plugin "daisyui"; docs for LLMs at daisyui.com/llms.txt; agent skill: npx skills add saadeghi/daisyui (css, html).
  Not allowed: Store templates have separate terms
  Rule: Keep the MIT copyright notice in copies of the library.
  Rule: Store templates are separate paid products with their own terms (not read).
  License: https://raw.githubusercontent.com/saadeghi/daisyui/master/LICENSE (checked 2026-10-21; details: https://agentgid.com/assets/daisyui/)
- Google Fonts (Fonts). Open-source font catalog with a Developer API for metadata, a CSS API and the Google Design MCP. Price: free; commercial use OK; no credit needed; ship inside your app with conditions.
  Connect: official MCP server https://design.googleapis.com/mcp; API docs https://developers.google.com/fonts/docs/developer_api (API key needed). Limits: API key required; quota not stated.
  Get files: Developer API: GET https://www.googleapis.com/webfonts/v1/webfonts?key=YOUR-API-KEY returns a files map of TTF URLs on fonts.gstatic.com (add capability=WOFF2 for woff2). CSS API: https://fonts.googleapis.com/css?family=.. . Whole collection: https://github.com/google/fonts/archive/main.zip (needs no key) (ttf, woff2).
  Not allowed: Most fonts are SIL OFL 1.1, some Apache 2, the Ubuntu fonts use the Ubuntu Font License 1.0; each family folder has its own license file.
  Not allowed: OFL fonts cannot be sold by themselves, only bundled with software.
  Not allowed: Modified OFL fonts cannot use the Reserved Font Name.
  Rule: Keep the license file with font files you bundle in an app.
  Rule: Respect Reserved Font Names when you modify a font.
  License: https://github.com/google/fonts (checked 2026-10-10; details: https://agentgid.com/assets/google-fonts/)
- Fira Code (Fonts). Free monospaced programming font with ligatures for common multi-character code sequences, released under the SIL OFL 1.1. Price: free; commercial use OK; no credit needed.
  Connect: npm firacode.
  Get files: Download the release zip (Fira_Code_v6.2.zip) from GitHub releases, or load the npm package firacode@6.2.0 from the jsDelivr CDN (link or @import) (ttf, otf, woff, variable ttf).
  Not allowed: Keep the copyright notice and license text with every copy
  Not allowed: Do not sell the font files by themselves
  Not allowed: Do not use the Reserved Font Name for a modified version without written permission
  Rule: Keep the copyright notice and OFL license text with every copy of the font you ship or bundle.
  Rule: Do not sell the font files by themselves; bundling with software is allowed.
  Rule: Do not use the Reserved Font Name for a modified version without written permission.
  Rule: Distribute the font and any modified versions under the SIL OFL 1.1 only.
  License: https://github.com/tonsky/FiraCode/blob/HEAD/LICENSE (checked 2026-10-10; details: https://agentgid.com/assets/firacode/)
- Lucide (Icons). ISC-licensed icon set (Feather fork) with packages for React, Vue, Svelte, Angular and more. Price: free; commercial use OK; no credit needed. Style: minimal, outline.
  Connect: community MCP server github.com/SeeYangZhi/lucide-icons-mcp; npm lucide-react.
  Get files: npm packages (lucide-react, @lucide/vue, @lucide/svelte, lucide-solid, @lucide/angular, lucide-static, core lucide) or static SVG/sprite/icon font; docs for LLMs at lucide.dev/llms.txt (svg).
  Not allowed: Keep the copyright and permission notice in all copies
  Rule: Keep the copyright and permission notice in all copies.
  License: https://lucide.dev/license (checked 2026-10-10; details: https://agentgid.com/assets/lucide/)
- Heroicons (Icons). MIT-licensed SVG icons from Tailwind Labs with React and Vue packages. Price: free; commercial use OK; no credit needed. Style: outline, filled.
  Connect: npm @heroicons/react.
  Get files: npm install @heroicons/react or @heroicons/vue, or copy the SVG source from heroicons.com (svg).
  Not allowed: Keep the MIT copyright and permission notice in all copies or substantial portions
  Rule: Keep the MIT copyright and permission notice in copies.
  License: https://github.com/tailwindlabs/heroicons/blob/master/LICENSE (checked 2026-10-10; details: https://agentgid.com/assets/heroicons/)
- React Kawaii (Illustrations). Open source library of cute SVG illustrations delivered as React components. Price: free; commercial use OK; no credit needed. Style: playful.
  Connect: npm react-kawaii.
  Get files: npm install --save react-kawaii; import a component (e.g. Planet) and render it with size, mood and color props (svg (React components)).
  Not allowed: The copyright and permission notice must be included in all copies or substantial portions
  Rule: Install via npm (react-kawaii) and import the components you need.
  Rule: Keep the MIT license file and copyright notice with any distributed copies of the code.
  License: https://github.com/elizabetdev/react-kawaii/blob/HEAD/LICENSE.md (checked 2026-10-12; details: https://agentgid.com/assets/react-kawaii/)
- Blush (Illustrations). Customizable illustration collections by artists, downloadable as PNG or SVG, with Figma and Sketch plugins. Price: free tier; commercial use OK; no credit needed.
  Connect: download from https://blush.design (no API).
  Rule: Do not re-sell or re-distribute Blush illustrations on their own, or as a compiled set.
  Rule: Do not use illustrations as the basis for merchandising, such as printing them straight onto T-shirts.
  Rule: Do not compile Blush illustrations to build a similar or competing service.
  Rule: Do not claim ownership of an illustration, even a modified one; the artist keeps it.
  License: https://blush.design/license (checked 2026-10-22; details: https://agentgid.com/assets/blush/)
- 3dicons (3D and isometric illustrations). Open-source library of hand-made 3D icons rendered in Blender, in several color styles and camera angles, free to download as image files. Price: free; commercial use OK; no credit needed. Style: 3d, colorful, playful, filled.
  Connect: download from https://3dicons.co (no API).
  Get files: Manual download: 'Download V1' / 'Download all' buttons or per-icon on https://3dicons.co; design files and a plugin via Figma Community; source repo github.com/realvjy/3dicons (png, figma).
  Not allowed: No official API or npm package found.
  Not allowed: Pro version terms are separate.
  Rule: CC0: no credit required, but credit to the author (Vijay Verma) is welcome.
  Rule: Check the license of the Pro version separately if you use it.
  License: https://3dicons.co (checked 2026-10-21; details: https://agentgid.com/assets/3dicons/)
- DrawKit (3D and isometric illustrations). Library of hand-drawn 2D and 3D illustration packs, icons and animations, labelled Free or Pro, with Figma plugins including a 3D builder. Price: free tier; commercial use OK; no credit needed; no AI training on its content. Style: 3d, flat, hand-drawn, colorful.
  Connect: download from https://www.drawkit.com (no API).
  Get files: Manual download of free or Pro packs from https://www.drawkit.com (Free packs need no account) (svg, png, figma, json).
  Not allowed: No redistribution as stand-alone files or compilations.
  Not allowed: Pro packs need a paid plan.
  Rule: Do not redistribute icons and illustrations stand-alone or as a compilation.
  Rule: Do not place them on stock sites or in design templates or template tools.
  Rule: Do not use them to train AI models.
  License: https://www.drawkit.com/license (checked 2026-10-21; details: https://agentgid.com/assets/drawkit/)

Install commands for the skills, the libraries, and each content source with its license rules. Paste it into AGENTS.md or your first prompt.

Agent Skills

Names and descriptions come from each skill's SKILL.md. Packs with more GitHub stars first, at most a few skills from one pack.

Libraries projects use for this

Web design Landing page Dashboard UI Mobile app Design polish Accessibility Web animation Product video Remove AI writing tells