Skills
.Work. You
Rest

opda-design

Community

Create branded interfaces and assets for the OPDA Knowledge Base with a warm-canvas, terracotta-accent, slab-serif editorial system.

Design & Creative#branding#design system#editorial design#UI kit#OPDA
Authorsparkling
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill unit offers a toolkit for generating well-branded interfaces and assets for the OPDA Knowledge Base, streamlining the design process and maintaining a consistent visual language.

Core Features & Use Cases

  • Design System: Provides comprehensive design guidelines, colors, type, fonts, assets, and UI kit components.
  • Prototyping: Enables the creation of static HTML files for doc pages, governance overviews, schema browsers, and design-system reference surfaces.
  • Use Case: If you need to design a new page or surface for the OPDA Knowledge Base, this Skill unit can help you generate the necessary CSS and assets based on the established design system.

Quick Start

Load the design-system.css into your project to apply the OPDA design system. If you want the tokens alone, use colors_and_type.css. Then, use the existing class hooks for styling your components and layouts.

Dependency Matrix

Required Modules

None required

Components

scriptsreferencesassets

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: opda-design
Download link: https://github.com/sparkling/opda/archive/main.zip#opda-design

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 620,000+ vetted skills library on demand.