How does this design system differ from standard AI-generated UI layouts?

It gives the agent one concrete system instead of letting it guess: exact color tokens, a type scale, spacing, small radii, hairline borders instead of shadows, and components to copy. The result is dense, dark developer UI where orange appears only where something needs attention, not the generic gradient-and-card look.

Which frontend frameworks and tools are compatible with this skill?

The skill is designed for modern web ecosystems, specifically optimized for Tailwind CSS v4, React, and standard HTML/CSS environments using CSS custom properties.

What specific assets are included in the 'abdalkader design' package?

You receive a complete visual token set, typography mapping for Geist and JetBrains Mono, and a library of component patterns for technical elements like trace viewers and data tables.

Can I add my own brand colors or glassmorphism effects to the system?

You can. The license lets you modify the tokens and components for your own products. The rules are opinionated on purpose (one accent, no gradients, no glassmorphism), so swapping the accent token keeps the system intact, while adding effects moves away from the style the pack teaches.

What is the typical workflow for applying this design system to an existing project?

The skill provides a step-by-step workflow: initializing tokens in your config, mapping typography roles, building components via defined patterns, and a final pre-ship checklist to ensure visual consistency.

Abdalkader Design System

Example session with this skill installed

Build the requests panel for our API monitoring page in Abdalkader style: a stat row with total requests, errors, p95 and slow count, then a dense table of recent requests with method, endpoint, status, duration and flags. Plain HTML and CSS.

Read your context and instructions
Compiled the abdalkader design system

Summary

Stat row plus a dense request table using the pack's tokens and components. Orange appears only on the slow value and the slow duration; the 500 uses the error red. No shadows, 1px hairlines, 32px rows, mono for every number.

Tokens used

Role	Token	Value
Page	`--bg`	`#0a0a0a`
Hairline	`--line`	`#1e1e1e`
Text	`--fg`	`#ededed`
Labels	`--muted`	`#9a9a9a`
Accent	`--accent`	`#f44e00`
Error	`--err`	`#f2554a`
Numbers	`--mono`	JetBrains Mono

Markup

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

<dl class="stats">
  <div><dt>requests / min</dt><dd>184</dd></div>
  <div><dt>errors</dt><dd>4</dd></div>
  <div><dt>p95</dt><dd class="hot">959 ms</dd></div>
  <div><dt>slow</dt><dd>12</dd></div>
</dl>

<div class="table-wrap">
  <table class="table" aria-label="Recent requests">
    <thead><tr>
      <th style="width: 92px">Time</th><th>Endpoint</th>
      <th class="r" style="width: 64px">Status</th>
      <th class="r" style="width: 150px">Duration</th>
      <th style="width: 64px">Flags</th>
    </tr></thead>
    <tbody>
      <tr>
        <td>04:08:19</td><td><span class="method">GET</span>/api/report</td>
        <td class="r s2">200</td>
        <td class="r"><span class="hot">1.09 s</span><span class="durbar slow" style="width: 46px"></span></td>
        <td><span class="pill">slow</span></td>
      </tr>
      <tr>
        <td>04:08:18</td><td><span class="method">GET</span>/api/checkout</td>
        <td class="r s5">500</td>
        <td class="r">2.0 ms<span class="durbar err" style="width: 4px"></span></td>
        <td><span class="pill err">err</span></td>
      </tr>
    </tbody>
  </table>
</div>

Checks the agent ran

One accent: orange used for the slow value only; status 500 uses --err.
dt before dd for screen readers; values render on top via CSS.
Stats collapse to 2 columns under 760px; low-value columns hide under 860px.
Contrast: --muted on --bg passes AA for labels.

Next steps

Add the / search toolbar and filter chips above the table from the components skill.
Link each endpoint cell to its trace view so keyboard users can open it.

Connects securely to your tools. The creator never sees your data.

About this skill

Four Agent Skills that teach Claude Code, Codex, Gemini CLI and Cursor one specific visual language: the one behind the runlens trace viewer, the burnbox security report and abdalkader.dev.

Near-black surfaces in small steps, 1px hairlines instead of shadows, a single orange accent (#f44e00) reserved for what needs attention, Geist for text and JetBrains Mono for every number, path and timestamp. Tables with 32px rows. Motion only when data changes.

What's inside

abdalkader-design: the rules. Principles, color roles with contrast ratios, type scale, spacing, layout grids for app shells, reports and landing pages, motion timings, states, accessibility, and a pre-ship checklist the agent runs before it says it is done.
abdalkader-tokens: drop-in tokens.css with dark default and light theme (system preference plus data-theme), a Tailwind v4 @theme file that replaces the default palette, and tokens.json.
abdalkader-components: header bar with live state, hero with a big stat, stat rows, filter chips, search with a / shortcut, dense data table, pills and severity badges, verdict banner, findings, hints, code blocks, waterfall timeline, empty, loading and error states, footer. Plain HTML/CSS and React + Tailwind.
abdalkader-data-viz: palette rules for charts with one accent, line chart, bar list, sparkline, meter, heatmap, and an animated service map with traffic particles. Recipes for Recharts, Chart.js and D3.

Includes a demo page built only from the pack and screenshots in both themes at desktop and mobile widths.

Works with

Any stack: plain HTML, React, Vue, Svelte, Astro, server templates. No runtime dependencies. Fonts load from Google Fonts.

How to use

Skills on Agensi run inside your AI agent. Copy the prompt, paste it into your agent, and it connects to Agensi and installs this skill for you. If a payment is needed, your agent shows it to you first.

Reviews

No reviews yet

Be one of the first to try it. Every listed skill passes our trust checks below.

Security scanned

Passed our 8-point scan before listing

Fresh listing

Recently published to Agensi

Money-back guarantee

Doesn't do what its page promises? You get your money back.

Abdalkader Design System