skills.rest
wikimedia
wikimediaOFFICIAL
Explore all skills by this author →
WebsiteGitHub

codex-usage

Adopt Wikimedia Codex design system components, tokens, and icons in frontend projects.

7|6|Updated Apr 28, 2026
Search Tags:#frontend#components#vue#codex#tokens#design-system#iconography
One-click install
npx skills add https://github.com/wikimedia/ProtoWiki --skill codex-usage
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: codex-usage
Source: https://github.com/wikimedia/ProtoWiki/tree/main/.agents/skills/codex-usage
Command: npx skills add https://github.com/wikimedia/ProtoWiki --skill codex-usage

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Frontend teams often struggle to consistently apply a design system across projects, leading to UI drift and slower iteration.

Core Features & Use Cases

  • Codex-first UI: prioritize Codex components, then tokens, then icons to rapidly build cohesive interfaces.
  • Asset guidance: reuse tokens, icons, and styles to maintain visual parity with design frames.
  • Use Case: when prototyping a new frontend, follow Codex usage patterns to ensure design fidelity and faster delivery.

Quick Start

Create a new frontend view that uses Codex components and tokens to match a given design.

Frequently Asked Questions about codex-usage

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I use Wikimedia Codex design tokens and components for frontend UI consistency?▼

To achieve UI consistency with the Codex design system, prioritize using Codex components first, then apply design tokens, and finally use icons to ensure visual parity across frontend projects.

What is the recommended hierarchy for applying Codex components, tokens, and custom CSS?▼

The recommended hierarchy for Codex usage enforces using Codex components, tokens, and icons first. You should only resort to writing custom CSS when necessary to handle edge cases or missing features.

Can I align Figma design frames with Vue components using the Wikimedia Codex design system?▼

Yes, you can align Figma design frames with Vue or React components using the Codex design system by reusing established tokens, icons, and styles to maintain visual fidelity during frontend prototyping.

How do I prototype a new frontend view that matches Wikimedia Codex design standards?▼

To prototype a new frontend view matching Codex standards, follow Codex usage patterns by integrating Web components, Vue, or React elements alongside design tokens to ensure rapid delivery and design fidelity.

When should I write custom CSS instead of using Codex tokens and components?▼

You should write custom CSS instead of using Codex tokens and components only when the existing Wikimedia design system library cannot adequately solve a specific UI requirement or layout constraint.

Related Skills

Explore More Software Engineering Skills→
wikimediawikimedia
7

codex-components

Catalog Codex Vue components and link to their reference documentation.

Official
Intermediate
NS-VandanaNS-Vandana

recreate-screenshot

Recreate pixel-perfect UI layouts from screenshots or image references.

Community
Advanced
viktorbezdekviktorbezdek
10

frontend-design

Create accessible, responsive UI design systems with Tailwind CSS, Radix UI, and shadcn/ui.

Community
Advanced
wikimediawikimedia
7

protowiki-update-codex

Upgrade ProtoWiki Codex packages in lockstep and propagate documented changes.

Official
Advanced