orynn-skill

A drop-in skill that teaches an AI coding agent to redesign your UI with orynn — its semantic OKLCH token system and component set. It produces calm, consistent, settings-style layouts that work in light and dark.

Install

npx @rajveer-singh-18/orynn-skill

It auto-detects your agent and drops the skill in the right place:

| you have | it writes | |---|---| | .claude/ | .claude/skills/orynn-redesign/ (a full skill package) | | .cursor/ | .cursor/rules/orynn-redesign.mdc | | .windsurf/ | .windsurf/rules/orynn-redesign.md | | .github/ | .github/instructions/orynn-redesign.instructions.md | | none of the above | ./orynn-redesign/ (folder + combined.md) |

Force a target: npx @rajveer-singh-18/orynn-skill cursor. Pipe it anywhere: npx @rajveer-singh-18/orynn-skill --print > my-agent-rules.md.

Use

1. Fill in templates/redesign-brief.md (primary colour, radius, density, what's in scope). The orynn-web Redesign page generates one for you from sliders.
2. Tell your agent: “Apply the orynn-redesign skill.” (with the brief pasted or attached).
3. It installs orynn, sets your choices on one <OrynnProvider>, and migrates your screens one reviewable diff at a time.

What's inside

• SKILL.md — the procedure + rules.
• reference/tokens.md — the full --orynn-* map + the theme prop.
• reference/components.md — native-markup → orynn-component mapping.
• reference/layout.md — the settings-style layout patterns.
• templates/redesign-brief.md — the fill-in-the-blanks brief.

MIT. Not affiliated with any specific AI vendor — works with any agent that reads project rules or files.