doc-dd-ui

Create and revise UI detailed design documents following diopside Obsidian standards.

1|Updated Feb 11, 2026
One-click install
npx skills add https://github.com/tsuji-tomonori/diopside-v3 --skill doc-dd-ui
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: doc-dd-ui
Source: https://github.com/tsuji-tomonori/diopside-v3/tree/main/.opencode/skills/doc-dd-ui
Command: npx skills add https://github.com/tsuji-tomonori/diopside-v3 --skill doc-dd-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires auto_link_glossary.py, validate_vault.py, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill ensures that UI detailed design documents (DD-UI) are created and revised according to the diopside Obsidian operational standards, maintaining consistency in screen elements, state transitions, and operational constraints.

Core Features & Use Cases

  • Standardized Documentation: Generates and revises UI detailed design documents adhering to Obsidian operational rules.
  • Consistency Enforcement: Organizes screen elements, component responsibilities, state transitions, and operational constraints at an implementable granularity.
  • Use Case: When updating the UI design for a user profile page based on new requirements, use this Skill to ensure all screen elements, their states (e.g., editable, disabled), and user interactions are clearly documented following the project's established format.

Quick Start

Use the doc-dd-ui skill to create a new UI detailed design document for the user login screen.

Frequently Asked Questions about doc-dd-ui

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

FAQPage Schema
How do I standardize UI design documentation in Obsidian?

To standardize UI design documentation in Obsidian, you need to enforce specific frontmatter keys and operational rules for screen elements, state transitions, and operational constraints. This ensures consistency across detailed design documents.

What is the best way to document UI state transitions and component responsibilities?

Documenting UI state transitions and component responsibilities requires organizing screen elements at an implementable granularity. Utilizing operational standards ensures that component states like editable or disabled are clearly defined and maintained.

How do you validate Obsidian vault standards for UI detailed design documents?

Validating Obsidian vault standards for UI detailed design documents involves running Python scripts to perform quality checks. This process enforces adherence to required frontmatter keys and verifies that documentation meets operational constraints.

Does the diopside framework support automated glossary term conversion for UI documents?

The diopside framework supports automated glossary term conversion for UI documents through specific Python scripts. This functionality standardizes terminology across your detailed design documentation automatically.

Can I use this approach to revise an existing user profile page design document?

You can use this approach to revise an existing user profile page design document by updating screen elements, states, and user interactions. It ensures all revisions strictly follow the established project format and operational standards.

Why do my UI design documents lack consistency across different screens?

UI design documents lack consistency across different screens when they fail to enforce specific frontmatter keys and operational constraints. Standardizing the documentation creation process resolves these inconsistencies by maintaining uniform state transitions and component responsibilities.