skills.rest
blueprintui
blueprintuiOFFICIAL
Explore all skills by this author →
WebsiteGitHub

documentation

Guide web component documentation authoring with 11ty style and structure.

335|45|Updated Aug 13, 2015
Search Tags:#documentation#technical writing#style guide#developer experience#web components#11ty
One-click install
npx skills add https://github.com/blueprintui/blueprintui --skill documentation-blueprintui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: documentation
Source: https://github.com/blueprintui/blueprintui/tree/main/.claude/skills/documentation
Command: npx skills add https://github.com/blueprintui/blueprintui --skill documentation-blueprintui

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill guides developers in creating high-quality, consistent, and user-friendly documentation for web components, reducing confusion, accelerating onboarding, and ensuring a unified voice across your project.

Core Features & Use Cases

  • Consistent Style Guidelines: Provides best practices for tone, voice, and technical writing, ensuring all documentation is easy to understand.
  • High-Quality Code Examples: Guides on creating semantic, accessible, and best-practice-aligned code snippets for examples.
  • Effective Cross-Referencing: Offers strategies for linking related components, design principles, and external resources, enhancing navigability.
  • Use Case: When authoring documentation for a new bp-dialog component, activate this skill to automatically review your content against established style guides and best practices, ensuring clarity and consistency without manual oversight.

Quick Start

Using the documentation skill, review the attached 'dialog.11ty.js' file and provide feedback on its adherence to the writing style guidelines.

Frequently Asked Questions about documentation

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

FAQPage Schema
How do I write consistent documentation for web components using 11ty?▼

Web component documentation in 11ty benefits from structured guidance on style, voice, and code examples. This Skill provides best practices for consistent tone, semantic HTML examples, accessibility standards, and cross-references to related components, ensuring clarity across your project.

What are the best practices for technical writing in component documentation?▼

Effective component documentation uses present-tense active voice, clear reasoning, semantic HTML, and accessibility best practices. This Skill guides you through establishing unified style guidelines, creating high-quality code snippets, and linking related components to enhance navigability.

How do I create accessible code examples for web component docs?▼

Accessible code examples in component documentation follow semantic HTML patterns and WCAG principles. This Skill teaches you to craft examples that demonstrate best practices, reducing confusion and accelerating developer onboarding.

Can I use this documentation approach with my 11ty design system project?▼

Yes. This Skill is designed for 11ty-based web component documentation projects. It provides structured guidance for authoring, maintaining, and cross-referencing component docs while adhering to design system principles.

How do I ensure documentation consistency across multiple web components?▼

Consistency in multi-component documentation requires established style guidelines, unified code example patterns, and strategic cross-referencing. This Skill automates adherence review against your documentation standards, ensuring unified voice and clarity.

Related Skills

Explore More Software Engineering Skills→
daffy0208daffy0208
34

Design System Architect

Define design tokens, components, and governance for scalable design systems.

Community
Advanced
brainbrewlabsbrainbrewlabs
7

docs

Build and manage a VitePress documentation site with local preview and GitHub Pages deployment.

Official
Basic
systempromptiosystempromptio
2

frontend-coding-standards

Enforce vanilla JS, semantic HTML, and token-based CSS standards for UI components.

Official
Intermediate
mahg-esmahg-es
3

static-site-generate

Generate static websites from Markdown into deployable HTML with CI workflows.

Official
Intermediate