wrkly-design-system-4f871c — independently scanned and version-tracked by SaferSkills.
SaferSkills independently audited wrkly-design-system-4f871c (Agent Skill) and scored it 100/100 (green). The audit ran 55 deterministic rules across Security, Supply Chain, Maintenance, Transparency, and Community; it found 0 high-severity and 0 lower-severity findings. The full rule-by-rule trace and per-finding evidence are below. Free, methodology-open.
Findings & checks · 0 flagged
Every scanned point with the score it earned and what moved between them.
First recorded scan — no prior version to compare against.
The primary manifest — the file an agent reads to learn what this artifact does.
When building or modifying any UI in the Wrkly project, follow these exact standards.
| Token | HSL Value | Usage |
|---|---|---|
--primary | 234 89% 64% | Buttons, links, active |
--primary-hover | 234 89% 57% | Button hover states |
--accent | 262 83% 68% | Secondary actions, badges |
--background | 0 0% 100% | Page background |
--background-secondary | 220 20% 97% | Card backgrounds |
--foreground | 222 47% 11% | Primary text |
--foreground-secondary | 215 16% 47% | Secondary text |
--border | 220 13% 91% | Borders, dividers |
--destructive | 0 84% 60% | Delete, error states |
--success | 160 84% 39% | Success states |
--warning | 38 92% 50% | Warning states |
.dark class)| Token | HSL Value |
|---|---|
--primary | 234 89% 68% |
--background | 222 47% 6% |
--background-secondary | 220 33% 10% |
--foreground | 210 40% 96% |
--border | 217 19% 17% |
Never use raw hex/rgb values. Always hsl(var(--token)).
next/font/google)--font-intertext-sm, text-base, text-lg, text-xl)font-semibold or font-boldfont-normal, text-foregroundtext-foreground-secondaryp-6 or px-6 py-4p-4 or p-5gap-3 or gap-4rounded-lg (0.5rem = var(--radius))max-w-7xl mx-auto<div className="bg-card rounded-lg border border-border p-4 hover:bg-card-hover transition-colors">
...
</div>// Primary
<button className="bg-primary text-primary-foreground rounded-lg px-4 py-2 hover:bg-primary-hover transition-colors">
// Ghost
<button className="text-foreground-secondary hover:bg-muted rounded-lg px-3 py-1.5 transition-colors">
// Destructive
<button className="bg-destructive text-destructive-foreground rounded-lg px-4 py-2 hover:opacity-90 transition-opacity"><input className="w-full bg-input border border-border rounded-lg px-3 py-2 text-foreground placeholder:text-muted-foreground focus:ring-2 focus:ring-ring focus:border-transparent outline-none transition-shadow" />bg-sidebarbg-sidebar-active text-sidebar-active-foregroundborder-r border-sidebar-bordertransition-colors, transition-opacity, transition-shadow (0.2s ease default)animate-pulseanimate-in fade-in zoom-in-95)size={16} for inline, size={20} for standaloneclassName="text-foreground-secondary" by defaultauth-bg class for gradient background with grid overlaybg-card/80 backdrop-blur-sm border border-border shadow-xl<Logo variant="lockup" /> or <Logo variant="icon" />public/brand/ — pixel-grid style (3+2 grid, glass highlights)~30 seconds. Free. No account. Every finding cites a rule and a line of evidence.