How do I install the Design Resources For Developers skill?

Run npx skillmds@latest add onfire7777/design-resources-for-developers in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Design Resources For Developers safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Design Resources For Developers?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Design Resources For Developers free to use?

Yes. Installing skills from SkillMD is free. This skill is licensed under MIT.

Who published Design Resources For Developers?

onfire7777 (@onfire7777) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Design Resources For Developers by onfire7777

Name: Design Resources For Developers
Author: onfire7777

Design Resources For Developers

Use when selecting design and UI resources for frontend work, including UI graphics, fonts, color tools, icons, logos, favicons, stock photos, videos, sound effects, vectors, mockups, HTML/CSS templates, CSS frameworks, animation/chart libraries, UI kits, React/Vue/Angular/Svelte/React Native UI libraries, design systems, design tools, inspiration, compression tools, browser extensions, and AI graphic design tools. This is a locally integrated mirror of bradtraversy/design-resources-for-developers.

onfire7777 Updated Sep 17, 2026

File contents

Design Resources for Developers

Use this skill to find practical design resources before building, redesigning, or polishing frontend interfaces. Prefer it when the task needs third-party resource discovery, asset sourcing, design-tool suggestions, UI-library comparison, or inspiration links.

Source

Upstream repository: https://github.com/bradtraversy/design-resources-for-developers
Integrated source commit: 6d9884e7260076e0eced4ac9f3be7665a91a9476
Local source checkout: %USERPROFILE%\.design-resources-for-developers\design-resources-for-developers

Workflow

Start with references/category-index.md to choose the relevant category.
Use scripts/search_design_resources.py for targeted lookup without loading the full README.
Load references/catalog.md only when category-level detail is needed.
Load references/source-readme.md when the exact upstream wording or full list matters.
Check references/contributing.md before proposing additions back to the upstream list.

Search Helper

Run from this skill directory:

python scripts/search_design_resources.py --query "tailwind" --limit 10 --format md
python scripts/search_design_resources.py --category "React UI Libraries" --limit 20 --format md
python scripts/search_design_resources.py --query "color contrast" --format json

The helper searches resource names, descriptions, URLs, and categories in references/resources.json.

Use Rules

Recommend resources by category and use case, not as a flat link dump.
Prefer official, actively maintained, accessible, and production-friendly tools when the user is making implementation choices.
Treat the mirrored catalogue as a starting point. If freshness matters, verify the resource live before relying on availability, pricing, license, or maintenance status.
Do not paste the full catalogue into the answer. Cite only the relevant few resources and mention the category used.
Keep licensing separate from availability: the upstream list focuses on free resources, but individual resources may have their own terms.

---name: design-resources-for-developersdescription: Use when selecting design and UI resources for frontend work, including UI graphics, fonts, color tools, icons, logos, favicons, stock photos, videos, sound effects, vectors, mockups, HTML/CSS templates, CSS frameworks, animation/chart libraries, UI kits, React/Vue/Angular/Svelte/React Native UI libraries, design systems, design tools, inspiration, compression tools, browser extensions, and AI graphic design tools. This is a locally integrated mirror of bradtraversy/design-resources-for-developers.license: MIT---# Design Resources for DevelopersUse this skill to find practical design resources before building, redesigning, or polishing frontend interfaces. Prefer it when the task needs third-party resource discovery, asset sourcing, design-tool suggestions, UI-library comparison, or inspiration links.## Source- Upstream repository: `https://github.com/bradtraversy/design-resources-for-developers`- Integrated source commit: `6d9884e7260076e0eced4ac9f3be7665a91a9476`- Local source checkout: `%USERPROFILE%\.design-resources-for-developers\design-resources-for-developers`## Workflow1. Start with `references/category-index.md` to choose the relevant category.2. Use `scripts/search_design_resources.py` for targeted lookup without loading the full README.3. Load `references/catalog.md` only when category-level detail is needed.4. Load `references/source-readme.md` when the exact upstream wording or full list matters.5. Check `references/contributing.md` before proposing additions back to the upstream list.## Search HelperRun from this skill directory:```bashpython scripts/search_design_resources.py --query "tailwind" --limit 10 --format mdpython scripts/search_design_resources.py --category "React UI Libraries" --limit 20 --format mdpython scripts/search_design_resources.py --query "color contrast" --format json```The helper searches resource names, descriptions, URLs, and categories in `references/resources.json`.## Use Rules- Recommend resources by category and use case, not as a flat link dump.- Prefer official, actively maintained, accessible, and production-friendly tools when the user is making implementation choices.- Treat the mirrored catalogue as a starting point. If freshness matters, verify the resource live before relying on availability, pricing, license, or maintenance status.- Do not paste the full catalogue into the answer. Cite only the relevant few resources and mention the category used.- Keep licensing separate from availability: the upstream list focuses on free resources, but individual resources may have their own terms.

Frequently asked questions