Add documatica-v12-design-system skill #611

mrnovamax-ctrl · 2026-01-26T22:26:55Z

Summary

This PR adds documatica-v12-design-system - a premium design system skill with 50+ ready-to-use component pairs (HTML + CSS).

Features

Visual Style: Extreme rounded corners (3-4rem), blue-600 accent, gold AI indicators (#FBBF24)
Typography: Inter font, uppercase tags, font-black headings
50+ Components: buttons, inputs, cards, tables, modals, navigation, hero sections, pricing, testimonials, forms, and more
Reference Files: Each component has HTML and CSS examples

Triggers

create UI
design component
style form
make card
add button

Live Demo

https://oplatanalogov.ru

Component Preview

Category	Components
Layout	Hero, Footer, Navigation, Sidebar, Grid, Containers
Forms	Inputs, Selects, Checkboxes, File Upload, Datepicker
Data	Tables, Cards, Stats, Timeline, Progress
Feedback	Alerts, Modals, Empty States, Error Pages
Commerce	Pricing, Product, Cart, Checkout
Social	Testimonials, Reviews, Rating, Comments, Chat

Files Added

skills/documatica-v12-design-system/SKILL.md
skills/documatica-v12-design-system/references/ (104 files)

Premium design system with 50+ component pairs (HTML+CSS). Features: extreme rounded corners, blue-600 accent, gold AI indicators, Inter font, generous whitespace. Components include: buttons, inputs, cards, tables, modals, navigation, hero sections, pricing, testimonials, forms, and more. Live demo: https://oplatanalogov.ru

Copilot

Pull request overview

Adds the new documatica-v12-design-system skill by introducing a large set of reference UI components (HTML + CSS) showcasing Documatica v12 styling.

Changes:

Added multiple reference component demo pages (HTML) and their stylesheets (CSS).
Implemented component-specific styling patterns (empty states, dividers, datepicker, comments, chat, badges, avatars, alerts, accordion).
Included design tokens usage via tokens.css (though not consistently across all demos).

Reviewed changes

Copilot reviewed 39 out of 105 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
skills/documatica-v12-design-system/references/empty-states.html	Adds an Empty States demo page with several variants (basic, action, AI, onboarding, etc.).
skills/documatica-v12-design-system/references/empty-states.css	Styles for Empty States variants used by the demo page.
skills/documatica-v12-design-system/references/dividers.html	Adds a Dividers demo page with multiple divider variants.
skills/documatica-v12-design-system/references/dividers.css	Styles for divider variants used by the demo page.
skills/documatica-v12-design-system/references/datepicker.css	Adds Datepicker component styling (inputs, calendar, ranges, dark mode).
skills/documatica-v12-design-system/references/comments.html	Adds Comments demo page (threading, actions, resolved, mentions, inline comment).
skills/documatica-v12-design-system/references/comments.css	Styles for Comments demo page components.
skills/documatica-v12-design-system/references/colors.css	Adds Colors/palette showcase styling.
skills/documatica-v12-design-system/references/checkboxes.html	Adds Checkboxes/Radio/Toggle demo page including chip-select UI.
skills/documatica-v12-design-system/references/checkboxes.css	Styles for checkboxes, radios, toggles, and chip-select controls.
skills/documatica-v12-design-system/references/chat.html	Adds Chat demo page (bubbles, avatars, attachments, typing, AI chat, input, header).
skills/documatica-v12-design-system/references/chat.css	Styles for chat UI variants used by the demo page.
skills/documatica-v12-design-system/references/cards.html	Adds Cards demo page with multiple card patterns.
skills/documatica-v12-design-system/references/buttons.html	Adds Buttons demo page for button variants and sizes.
skills/documatica-v12-design-system/references/badges.html	Adds Badges demo page (status, outline, dot, pill, icons, removable tags).
skills/documatica-v12-design-system/references/badges.css	Styles for badges/tags used by the demo page.
skills/documatica-v12-design-system/references/avatars.html	Adds Avatars demo page (sizes, initials, status, groups, shapes).
skills/documatica-v12-design-system/references/avatars.css	Styles for avatar variants and demo layouts.
skills/documatica-v12-design-system/references/alerts.html	Adds Alerts demo page (basic, dismissible, actions, inline, toasts, banner).
skills/documatica-v12-design-system/references/alerts.css	Styles for alerts, toasts, and banners used by the demo page.
skills/documatica-v12-design-system/references/accordion.css	Adds accordion/collapsible styling variants used by an accordion demo.

Copilot · 2026-01-26T22:28:44Z

skills/documatica-v12-design-system/references/checkboxes.css

+}
+
+/* Hover State */
+.chip:hover .chip__label:not(:checked) {


This selector will never match because :checked only applies to checkable form controls (e.g., the hidden input), not the .chip__label span. Update the selector to target the input state (e.g., :not(:checked) + .chip__label) so the hover styling applies correctly for unselected chips.

Suggested change

.chip:hover .chip__label:not(:checked) {

.chip:hover .chip__input:not(:checked) + .chip__label {

Copilot · 2026-01-26T22:28:44Z

skills/documatica-v12-design-system/references/buttons.html

+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Documatica Button Kit v12.0</title>


Unlike the other reference pages, this demo doesn't include tokens.css. If buttons.css relies on the design tokens (var(--spacing-*), --color-*, etc.), this page will render incorrectly. Add <link rel=\"stylesheet\" href=\"tokens.css\"> before buttons.css for consistency with the other demos.

Suggested change

<title>Documatica Button Kit v12.0</title>

<title>Documatica Button Kit v12.0</title>

<link rel="stylesheet" href="tokens.css">

Copilot · 2026-01-26T22:28:45Z

skills/documatica-v12-design-system/references/chat.html

+                    <button class="chat-input__action">
+                        <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                            <path d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"></path>
+                        </svg>
+                    </button>
+                    <input type="text" placeholder="Введите сообщение...">
+                    <button class="chat-input__action">
+                        <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                            <path d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                        </svg>
+                    </button>
+                    <button class="chat-input__send">
+                        <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                            <path d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path>
+                        </svg>
+                    </button>


These icon-only buttons don't have accessible names, so screen readers will announce them as unlabeled buttons. Add aria-label (or visible text) to each icon-only button (e.g., attach, emoji/reactions, send) to make the controls usable with assistive tech.

Copilot · 2026-01-26T22:28:45Z

skills/documatica-v12-design-system/references/avatars.html

+                        <img src="https://i.pravatar.cc/150?img=1" alt="Avatar">
+                    </div>
+                    <span class="avatar-size">XS (24px)</span>
+                </div>
+                <div class="avatar-demo">
+                    <div class="avatar avatar--sm">
+                        <img src="https://i.pravatar.cc/150?img=2" alt="Avatar">
+                    </div>
+                    <span class="avatar-size">SM (32px)</span>
+                </div>
+                <div class="avatar-demo">
+                    <div class="avatar avatar--base">
+                        <img src="https://i.pravatar.cc/150?img=3" alt="Avatar">
+                    </div>
+                    <span class="avatar-size">Base (40px)</span>
+                </div>
+                <div class="avatar-demo">
+                    <div class="avatar avatar--lg">
+                        <img src="https://i.pravatar.cc/150?img=4" alt="Avatar">
+                    </div>
+                    <span class="avatar-size">LG (48px)</span>
+                </div>
+                <div class="avatar-demo">
+                    <div class="avatar avatar--xl">
+                        <img src="https://i.pravatar.cc/150?img=5" alt="Avatar">
+                    </div>
+                    <span class="avatar-size">XL (64px)</span>
+                </div>
+                <div class="avatar-demo">
+                    <div class="avatar avatar--2xl">
+                        <img src="https://i.pravatar.cc/150?img=6" alt="Avatar">


The demo pulls avatar images from a third-party host (i.pravatar.cc). This can leak user IP/metadata when viewing the references and breaks offline usage. Consider using local placeholder assets (or inline SVG/data URIs) for reference previews.

Suggested change

<img src="https://i.pravatar.cc/150?img=1" alt="Avatar">

</div>

<span class="avatar-size">XS (24px)</span>

</div>

<div class="avatar-demo">

<div class="avatar avatar--sm">

<img src="https://i.pravatar.cc/150?img=2" alt="Avatar">

</div>

<span class="avatar-size">SM (32px)</span>

</div>

<div class="avatar-demo">

<div class="avatar avatar--base">

<img src="https://i.pravatar.cc/150?img=3" alt="Avatar">

</div>

<span class="avatar-size">Base (40px)</span>

</div>

<div class="avatar-demo">

<div class="avatar avatar--lg">

<img src="https://i.pravatar.cc/150?img=4" alt="Avatar">

</div>

<span class="avatar-size">LG (48px)</span>

</div>

<div class="avatar-demo">

<div class="avatar avatar--xl">

<img src="https://i.pravatar.cc/150?img=5" alt="Avatar">

</div>

<span class="avatar-size">XL (64px)</span>

</div>

<div class="avatar-demo">

<div class="avatar avatar--2xl">

<img src="https://i.pravatar.cc/150?img=6" alt="Avatar">

<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'><rect width='80' height='80' fill='%23E5E7EB'/><circle cx='40' cy='30' r='14' fill='%23D1D5DB'/><path d='M16 64c4-12 12-20 24-20s20 8 24 20' fill='%23D1D5DB'/></svg>" alt="Avatar">

</div>

<span class="avatar-size">XS (24px)</span>

</div>

<div class="avatar-demo">

<div class="avatar avatar--sm">

<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'><rect width='80' height='80' fill='%23E5E7EB'/><circle cx='40' cy='30' r='14' fill='%23D1D5DB'/><path d='M16 64c4-12 12-20 24-20s20 8 24 20' fill='%23D1D5DB'/></svg>" alt="Avatar">

</div>

<span class="avatar-size">SM (32px)</span>

</div>

<div class="avatar-demo">

<div class="avatar avatar--base">

<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'><rect width='80' height='80' fill='%23E5E7EB'/><circle cx='40' cy='30' r='14' fill='%23D1D5DB'/><path d='M16 64c4-12 12-20 24-20s20 8 24 20' fill='%23D1D5DB'/></svg>" alt="Avatar">

</div>

<span class="avatar-size">Base (40px)</span>

</div>

<div class="avatar-demo">

<div class="avatar avatar--lg">

<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'><rect width='80' height='80' fill='%23E5E7EB'/><circle cx='40' cy='30' r='14' fill='%23D1D5DB'/><path d='M16 64c4-12 12-20 24-20s20 8 24 20' fill='%23D1D5DB'/></svg>" alt="Avatar">

</div>

<span class="avatar-size">LG (48px)</span>

</div>

<div class="avatar-demo">

<div class="avatar avatar--xl">

<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'><rect width='80' height='80' fill='%23E5E7EB'/><circle cx='40' cy='30' r='14' fill='%23D1D5DB'/><path d='M16 64c4-12 12-20 24-20s20 8 24 20' fill='%23D1D5DB'/></svg>" alt="Avatar">

</div>

<span class="avatar-size">XL (64px)</span>

</div>

<div class="avatar-demo">

<div class="avatar avatar--2xl">

<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'><rect width='80' height='80' fill='%23E5E7EB'/><circle cx='40' cy='30' r='14' fill='%23D1D5DB'/><path d='M16 64c4-12 12-20 24-20s20 8 24 20' fill='%23D1D5DB'/></svg>" alt="Avatar">

Copilot · 2026-01-26T22:28:45Z

skills/documatica-v12-design-system/references/empty-states.css

+.container {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: var(--spacing-20) var(--spacing-6);
+}
+
+.back-link {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--spacing-3);
+    margin-bottom: var(--spacing-10);
+    font-size: var(--font-size-md);
+    font-weight: var(--font-weight-black);
+    color: var(--color-slate-400);
+    text-decoration: none;
+    text-transform: uppercase;
+    letter-spacing: var(--tracking-wider);
+    transition: var(--transition-base);
+}
+
+.back-link svg {
+    width: 20px;
+    height: 20px;
+    transition: var(--transition-arrow);
+}
+
+.back-link:hover {
+    color: var(--color-primary);
+}
+
+.back-link:hover svg {
+    transform: translateX(-4px);
+}
+
+.header {
+    margin-bottom: var(--spacing-16);
+}
+
+.header__status {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-3);
+    margin-bottom: var(--spacing-6);
+}
+


The same layout primitives (.container, .back-link, .header, .section, .footer, etc.) appear duplicated across many reference CSS files in this PR. To reduce drift and simplify updates, consider extracting these shared demo-layout styles into a single common stylesheet (e.g., references/demo-base.css) that each page imports.

Suggested change

.container {

max-width: 800px;

margin: 0 auto;

padding: var(--spacing-20) var(--spacing-6);

}

.back-link {

display: inline-flex;

align-items: center;

gap: var(--spacing-3);

margin-bottom: var(--spacing-10);

font-size: var(--font-size-md);

font-weight: var(--font-weight-black);

color: var(--color-slate-400);

text-decoration: none;

text-transform: uppercase;

letter-spacing: var(--tracking-wider);

transition: var(--transition-base);

}

.back-link svg {

width: 20px;

height: 20px;

transition: var(--transition-arrow);

}

.back-link:hover {

color: var(--color-primary);

}

.back-link:hover svg {

transform: translateX(-4px);

}

.header {

margin-bottom: var(--spacing-16);

}

.header__status {

display: flex;

align-items: center;

gap: var(--spacing-3);

margin-bottom: var(--spacing-6);

}

@import './demo-base.css';

/* Empty-state specific styles follow */

aaronpowell

For contributed skills/etc. we want to have them kept as English primarily, as token usage by models is most optimised for English.

Copilot AI review requested due to automatic review settings January 26, 2026 22:26

Copilot AI reviewed Jan 26, 2026

View reviewed changes

aaronpowell requested changes Jan 28, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add documatica-v12-design-system skill #611

Add documatica-v12-design-system skill #611

mrnovamax-ctrl commented Jan 26, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Jan 26, 2026

Uh oh!

Copilot AI Jan 26, 2026

Uh oh!

Copilot AI Jan 26, 2026

Uh oh!

Copilot AI Jan 26, 2026

Uh oh!

Copilot AI Jan 26, 2026

Uh oh!

aaronpowell left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	.chip:hover .chip__label:not(:checked) {
	.chip:hover .chip__input:not(:checked) + .chip__label {

	<title>Documatica Button Kit v12.0</title>
	<title>Documatica Button Kit v12.0</title>
	<link rel="stylesheet" href="tokens.css">

Add documatica-v12-design-system skill #611

Are you sure you want to change the base?

Add documatica-v12-design-system skill #611

Conversation

mrnovamax-ctrl commented Jan 26, 2026

Summary

Features

Triggers

Live Demo

Component Preview

Files Added

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Jan 26, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 26, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 26, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 26, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 26, 2026

Choose a reason for hiding this comment

Uh oh!

aaronpowell left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants