UI Styling
Ohh-889/skyroc
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs.
Establish or update persistent product and visual design guidance in .design-context.md.
Install Dev Design Context
$ npx skills add hashgraph-online/awesome-codex-plugins --skill dev-design-context -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install hashgraph-online/awesome-codex-plugins dev-design-context --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/hashgraph-online/awesome-codex-plugins.git skills-src && mkdir -p .claude/skills && cp -r skills-src/plugins/Jason-chen-coder/dev-skills/skills/dev-design-context .claude/skills/dev-design-context && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "dev-design-context" agent skill from https://github.com/hashgraph-online/awesome-codex-plugins/tree/main/plugins/Jason-chen-coder/dev-skills/skills/dev-design-context into .claude/skills/dev-design-context/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "dev-design-context", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/hashgraph-online/awesome-codex-plugins/tree/main/plugins/Jason-chen-coder/dev-skills/skills/dev-design-contextType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add hashgraph-online/awesome-codex-plugins --skill dev-design-context -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install hashgraph-online/awesome-codex-plugins dev-design-context --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/hashgraph-online/awesome-codex-plugins.git skills-src && mkdir -p .agents/skills && cp -r skills-src/plugins/Jason-chen-coder/dev-skills/skills/dev-design-context .agents/skills/dev-design-context && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "dev-design-context" agent skill from https://github.com/hashgraph-online/awesome-codex-plugins/tree/main/plugins/Jason-chen-coder/dev-skills/skills/dev-design-context into .agents/skills/dev-design-context/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "dev-design-context", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add hashgraph-online/awesome-codex-plugins --skill dev-design-context -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install hashgraph-online/awesome-codex-plugins dev-design-context --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/hashgraph-online/awesome-codex-plugins.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/plugins/Jason-chen-coder/dev-skills/skills/dev-design-context .cursor/skills/dev-design-context && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "dev-design-context" agent skill from https://github.com/hashgraph-online/awesome-codex-plugins/tree/main/plugins/Jason-chen-coder/dev-skills/skills/dev-design-context into .cursor/skills/dev-design-context/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "dev-design-context", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/hashgraph-online/awesome-codex-plugins.git --path plugins/Jason-chen-coder/dev-skills/skills/dev-design-context--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add hashgraph-online/awesome-codex-plugins --skill dev-design-context -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install hashgraph-online/awesome-codex-plugins dev-design-context --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/hashgraph-online/awesome-codex-plugins.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/plugins/Jason-chen-coder/dev-skills/skills/dev-design-context .gemini/skills/dev-design-context && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "dev-design-context" agent skill from https://github.com/hashgraph-online/awesome-codex-plugins/tree/main/plugins/Jason-chen-coder/dev-skills/skills/dev-design-context into .gemini/skills/dev-design-context/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "dev-design-context", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install hashgraph-online/awesome-codex-plugins dev-design-contextInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add hashgraph-online/awesome-codex-plugins --skill dev-design-context -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/hashgraph-online/awesome-codex-plugins.git skills-src && mkdir -p .github/skills && cp -r skills-src/plugins/Jason-chen-coder/dev-skills/skills/dev-design-context .github/skills/dev-design-context && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "dev-design-context" agent skill from https://github.com/hashgraph-online/awesome-codex-plugins/tree/main/plugins/Jason-chen-coder/dev-skills/skills/dev-design-context into .github/skills/dev-design-context/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "dev-design-context", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add hashgraph-online/awesome-codex-plugins --skill dev-design-context -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install hashgraph-online/awesome-codex-plugins dev-design-context --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/hashgraph-online/awesome-codex-plugins.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/plugins/Jason-chen-coder/dev-skills/skills/dev-design-context .opencode/skills/dev-design-context && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "dev-design-context" agent skill from https://github.com/hashgraph-online/awesome-codex-plugins/tree/main/plugins/Jason-chen-coder/dev-skills/skills/dev-design-context into .opencode/skills/dev-design-context/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "dev-design-context", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
dev-design-context- GitHub stars
- 1.2k
- Token cost
- ~1k tokens
- SKILL.md length
- 394 words
- Files
- 2 (incl. references)
- Skills in repo
- 736
- Repo updated
- First seen
- Licence
- Apache-2.0
At a glance
Establish or update persistent product and visual design guidance in .design-context.md.
- Initial design setup
- SKILL.md covers Establish what is already known, Resolve material gaps, Write the reusable context and Multi-Agent Profile
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
- A deliberate design-direction reset
What it does
Dev Design Context is an agent skill from hashgraph-online/awesome-codex-plugins. Establish or update persistent product and visual design guidance in .design-context.md. Use for initial design setup, a deliberate design-direction reset, or explicit 设计上下文 requests. Discover existing users, components, tokens, assets, and constraints before asking about material gaps. Does not implement UI; ordinary UI work does not require repeating this setup.
Its SKILL.md is about 1k tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files, including reference files (for example `references/dev-baseline.md`).
It sits in Frontend & Design, covering UI design. The repository describes itself as: A curated list of awesome OpenAI Codex / ChatGPT plugins, skills, and resources. The 1 Codex Marketplace. See live plugins at: https://hol.org/plugins/best-codex-plugins. The licence is Apache-2.0.
When your agent uses it
- Initial design setup
- A deliberate design-direction reset
- Explicit 设计上下文 requests
Example prompts
- “/dev-design-context”
What it can do on your machine
Read from SKILL.md and the folder at commit 16b4156. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md (its code samples are markdown).
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Dev Design Context loads about 1k tokens when it runs, and up to ~1.9k if it reads all its reference files. Until then it costs about 96 tokens; SKILL.md has 394 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from hashgraph-online/awesome-codex-plugins at commit 16b4156, republished under its Apache-2.0 licence (© hashgraph-online). 394 words, ~1,024 tokens.
Download SKILL.mdSave it as
.claude/skills/dev-design-context/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.- name
- dev-design-context
- description
- Establish or update persistent product and visual design guidance in .design-context.md. Use for initial design setup, a deliberate design-direction reset, or explicit 设计上下文 requests. Discover existing users, components, tokens, assets, and constraints before asking about material gaps. Does not implement UI; ordinary UI work does not require repeating this setup.
Dev Design Context
Persist the project-specific design decisions future UI work needs. Read references/dev-baseline.md. This skill writes design guidance, not application code, mockups, or implementation reviews.
Establish what is already known
Read existing .design-context.md, product/brand documentation, representative screens, reusable components, design tokens, and actual assets. Inspect relevant paths rather than cataloging every style declaration. Distinguish deliberate conventions from isolated inconsistencies or legacy accidents.
Capture the audience and their recurring tasks, product context, visual hierarchy, typography, color roles, layout density, component patterns, asset identity, supported devices, and interaction/accessibility constraints where evidenced. Reference source paths so future agents can find authoritative tokens and components rather than duplicating them.
An existing valid design context usually needs no update. An absent .design-context.md does not block implementation when existing instructions, code, or supplied designs already establish the direction.
Resolve material gaps
Ask only what affects the design and cannot be inferred: a conflicting audience, undefined brand constraints, a major direction change, target device needs, or an explicit accessibility requirement. Use focused questions, not a fixed questionnaire or mandatory three-word personality exercise.
Choose reversible details from established conventions and record consequential assumptions. Do not invent a brand direction unsupported by the brief, and do not label accessibility compliance as achieved without evidence. References describe intent; copying arbitrary reference styling is not a substitute for understanding the product.
Show full SKILL.md (173 more words)Show less
Write the reusable context
Default output is .design-context.md in the project root. If it exists, update its ## Design Context section in place, preserving unrelated content. Follow a user-specified destination or chat-only instruction instead when present.
Include only sections that guide actual decisions:
## Design Context
### Users and tasks
<Audience, context of use, and recurring workflows>
### Product and brand
<Supported voice, identity, and visual constraints>
### Existing design system
<Authoritative tokens, components, assets, and relevant source paths>
### Design direction
<Hierarchy, density, typography, color roles, imagery, responsive and motion expectations>
### Design principles
<Concrete project-specific rules and the decisions they guide>
### Open assumptions
<Material unresolved assumptions only; omit if none>Keep guidance concise and evidence-based; avoid universal design advice, invented requirements, task checklists, or duplicate token tables that will drift. Update another assistant configuration such as .github/copilot-instructions.md only when that destination is requested; do not add an unsolicited synchronization question.
Re-read the result to check consistency with the sources and the user's direction. Report the path and the principles that materially guide future work, plus remaining uncertainty. Do not claim UI parity, responsiveness, or accessibility from a documentation edit alone.
Multi-Agent Profile
Recommended agent_type: explorer
When delegation is available and authorized, a bounded explorer can inspect components, tokens, assets, and representative screens and return facts with source paths. One agent owns user questions and the final context file. In the source repository, docs/multi-agent-policy.md is optional guidance, not a required standalone resource.
© hashgraph-online, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 1 other file (references) in plugins/Jason-chen-coder/dev-skills/skills/dev-design-context of hashgraph-online/awesome-codex-plugins.
- SKILL.md
- references/dev-baseline.md
Open the folder on GitHubat commit 16b4156
Compare with similar skills
Dev Design Context next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Dev Design Context this skillhashgraph-online/awesome-codex-plugins | 1.2k | — | ~1k | Automated safety check: Pass | Apache-2.0 | |
| UI StylingOhh-889/skyroc | 795 | 13 repos | ~2.5k | Automated safety check: Pass | MIT | |
| LobeHub Interactive Prototypelobehub/lobehub | 83k | — | ~1.6k | Automated safety check: Pass | Custom licence | |
| Make Interfaces Feel Bettersamuelclay/NewsBlur | 7.6k | 10 repos | ~1.5k | Automated safety check: Pass | MIT | |
| UI UX Pro MaxZxBing0066/pixel-converter | 181 | 13 repos | ~2.6k | Automated safety check: Notes | BSD-2-Clause | |
| Stitch Prompt Enhancergoogle-labs-code/stitch-skills | 8.4k | 6 repos | ~1.7k | Automated safety check: Pass | Apache-2.0 |
Similar skills
LobeHub Interactive Prototype
lobehub/lobehub
Builds single-file interactive HTML prototypes rendered with the real LobeHub UI components and written as production-style React, so they can later be split into files.
Make Interfaces Feel Better
samuelclay/NewsBlur
Design engineering principles for making interfaces feel polished.
UI UX Pro Max
ZxBing0066/pixel-converter
UI/UX design intelligence with searchable database. An agent skill from ZxBing0066/pixel-converter.
- Official
Stitch Prompt Enhancer
google-labs-code/stitch-skills
Rewrites a vague UI generation idea into a structured, keyword-rich prompt for Stitch, pulling in an existing DESIGN.md design system when the project has one.
Design Dna
zanwei/design-dna
Extract, define, and apply design DNA across three dimensions: design system (tokens), design style (qualitative feel), and visual effects (Canvas, WebGL, 3D, particles, shaders, scroll effects…
More from hashgraph-online/awesome-codex-plugins
All 736 skills in this repoAnime Reaction Gif
hashgraph-online/awesome-codex-plugins
Create original anime-style reaction stickers as looping GIFs and MP4 previews, using generated character pose sheets and timed key poses.
Calibredb
hashgraph-online/awesome-codex-plugins
Manage and query Calibre libraries with the calibredb CLI (local paths or Calibre Content server URLs).
Rust API Test Harness
hashgraph-online/awesome-codex-plugins
A skill your agent uses when adding, changing, testing, or debugging Rust HTTP APIs and services, especially when Codex needs black-box integration tests, random-port app startup, real database test…
Art
hashgraph-online/awesome-codex-plugins
Make a studio's game look like something at build time — a cover from a real frame of the game (free), painted covers, backdrops, textures and character plates from image models through the…
Calle
hashgraph-online/awesome-codex-plugins
Use CALL-E from Codex through the calle CLI. An agent skill from hashgraph-online/awesome-codex-plugins.
Game Balance Economy
hashgraph-online/awesome-codex-plugins
Balance game difficulty, resources, rewards, probability, progression, economies, and dominant strategies.
Related
Categories
Questions about Dev Design Context
What does Dev Design Context do?
Establish or update persistent product and visual design guidance in .design-context.md. Dev Design Context is an agent skill from hashgraph-online/awesome-codex-plugins.md.
When should I use Dev Design Context?
Dev Design Context fits situations like: initial design setup; A deliberate design-direction reset; explicit 设计上下文 requests.
How do I install Dev Design Context in Claude Code?
Run `npx skills add hashgraph-online/awesome-codex-plugins --skill dev-design-context -a claude-code`. Or copy the skill folder (plugins/Jason-chen-coder/dev-skills/skills/dev-design-context in hashgraph-online/awesome-codex-plugins) into .claude/skills/dev-design-context in your project. Claude Code loads it when a task matches its description.
How do I install Dev Design Context in Codex?
Run `npx skills add hashgraph-online/awesome-codex-plugins --skill dev-design-context -a codex`. Or copy the skill folder (plugins/Jason-chen-coder/dev-skills/skills/dev-design-context in hashgraph-online/awesome-codex-plugins) into .agents/skills/dev-design-context in your project. Codex loads it when a task matches its description.
Can I use Dev Design Context in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add hashgraph-online/awesome-codex-plugins --skill dev-design-context -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/dev-design-context, .gemini/skills/dev-design-context, .github/skills/dev-design-context and .opencode/skills/dev-design-context in your project.
What does Dev Design Context need to run?
SKILL.md names no scripts, command-line tools or credentials: Dev Design Context is instructions for the agent only.
Does Dev Design Context access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Dev Design Context safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Dev Design Context use?
Dev Design Context is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Dev Design Context use?
About 1k tokens (SKILL.md is roughly 4.1k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 893 tokens, read only when the agent opens those files.
What are the alternatives to Dev Design Context?
Skills that share tags, products or a category with Dev Design Context: UI Styling (Ohh-889/skyroc, 795 stars), LobeHub Interactive Prototype (lobehub/lobehub, 83k stars), Make Interfaces Feel Better (samuelclay/NewsBlur, 7.6k stars) and UI UX Pro Max (ZxBing0066/pixel-converter, 181 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Dev Design Context?
hashgraph-online (a GitHub organization) maintains it in hashgraph-online/awesome-codex-plugins, which has 1,232 GitHub stars. The repository holds 736 skills in this directory. The repository was last updated on October 6, 2026.
Source: hashgraph-online/awesome-codex-plugins on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.