### Install Uncodixfy as an Agent Skill

Source: https://context7.com/cyxzdev/uncodixfy/llms.txt

Use the npx or bunx CLI to add Uncodixfy as a reusable skill for AI coding agents. Once installed, invoke it using the /uncodixfy command in your agent session.

```bash
npx skills add cyxzdev/Uncodixfy
```

```bash
bunx skills add cyxzdev/Uncodixfy
```

```bash
/uncodixfy
```

--------------------------------

### Install and Invoke Uncodixfy Skill

Source: https://context7.com/cyxzdev/uncodixfy/llms.txt

Command to install the Uncodixfy skill and invoke it within a Claude Code session.

```bash
# Install and invoke in a Claude Code session
npx skills add cyxzdev/Uncodixfy
```

--------------------------------

### Example HTML Output Structure

Source: https://context7.com/cyxzdev/uncodixfy/llms.txt

This HTML structure represents the expected clean, non-AI-default output for a project dashboard page, including a sidebar and main content area.

```html
<div class="layout">
  <aside class="sidebar">
    <!-- 240-260px fixed width, solid background, simple border-right -->
    <nav>
      <a href="/dashboard">Dashboard</a>
      <a href="/projects">Projects</a>
      <a href="/settings">Settings</a>
    </nav>
  </aside>
  <main class="content">
    <h1>Projects</h1>
    <table>
      <thead>
        <tr><th>Name</th><th>Status</th><th>Updated</th></tr>
      </thead>
      <tbody>
        <tr><td>Alpha</td><td>Active</td><td>2024-06-01</td></tr>
      </tbody>
    </table>
  </main>
</div>
```

--------------------------------

### Invoke Uncodixify Agent Skill

Source: https://github.com/cyxzdev/uncodixfy/blob/main/README.md

Once installed, use this command to invoke the Uncodixify skill within your AI coding agent.

```text
/uncodixfy
```

--------------------------------

### Banned HTML UI Patterns

Source: https://context7.com/cyxzdev/uncodixfy/llms.txt

Examples of UI patterns that should not be used in AI-generated code, including headline blocks, decorative cards, glassmorphism, gradient buttons, KPI grids, and gradient pipeline bars. Use simple, functional layouts instead.

```html
<!-- ❌ BANNED: Headline block with eyebrow label -->
<div class="headline">
  <small>Team Command</small>
  <h2>One place to track what matters today.</h2>
  <p>The layout stays strict and readable...</p>
</div>
```

```html
<!-- ❌ BANNED: Decorative card with small/strong combo -->
<div class="team-note">
  <small>Focus</small>
  <strong>Keep updates brief, blockers visible, and next actions easy to spot.</strong>
</div>
```

```html
<!-- ❌ BANNED: Glassmorphism panel -->
<div style="
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(12px);
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.35);
">...</div>
```

```html
<!-- ❌ BANNED: Gradient button -->
<button style="background: linear-gradient(135deg, #6c8eff, #a78bfa); border-radius: 9999px;">
  Submit
</button>
```

```html
<!-- ❌ BANNED: KPI metric card grid as default dashboard -->
<div class="kpi-grid">
  <div class="kpi-card">...</div>
  <div class="kpi-card">...</div>
  <div class="kpi-card">...</div>
</div>
```

```html
<!-- ❌ BANNED: Pipeline bar with gradient fill -->
<div class="pipeline-bar" style="background: linear-gradient(90deg, var(--primary), #4fe0c0);"></div>
```

```html
<!-- ✅ CORRECT: Simple functional layout -->
<div class="layout" style="display:flex;">
  <aside style="width:248px; border-right:1px solid #e5e7eb;">
    <nav style="padding:16px;">
      <a href="/">Dashboard</a>
    </nav>
  </aside>
  <main style="flex:1; padding:24px;">
    <h1>Dashboard</h1>
  </main>
</div>
```

--------------------------------

### Use Uncodixfy.md as a System Prompt

Source: https://context7.com/cyxzdev/uncodixfy/llms.txt

Include the Uncodixfy.md file content directly within your AI system prompt or context instructions when requesting UI code generation. This ensures the AI adheres to the specified rules.

```text
[System prompt / context injection]

---
--- BEGIN UNCODIXFY RULES ---
(paste contents of Uncodixfy.md here)
--- END UNCODIXFY RULES ---

Now generate a project dashboard page with a sidebar, a data table, and a header.
```

--------------------------------

### Add Uncodixify Agent Skill

Source: https://github.com/cyxzdev/uncodixfy/blob/main/README.md

Use this command to add the Uncodixify agent skill to your AI coding agent. Supports npm and bunx.

```bash
npx skills add cyxzdev/Uncodixfy
```

--------------------------------

### Build Settings Page with Form and Sidebar (React)

Source: https://context7.com/cyxzdev/uncodixfy/llms.txt

This React component generates a settings page with a sidebar navigation and a profile editing form. It uses inline styles for layout and basic form elements.

```jsx
// ✅ Output after /uncodixfy — React example (clean, no AI defaults)
function SettingsPage() {
  return (
    <div style={{ display: 'flex', minHeight: '100vh' }}>
      <aside style={{ width: 248, borderRight: '1px solid #e5e7eb', padding: 16 }}>
        <nav style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
          <a href="/settings/profile" style={{ padding: '6px 8px', borderRadius: 6 }}>Profile</a>
          <a href="/settings/security" style={{ padding: '6px 8px', borderRadius: 6 }}>Security</a>
          <a href="/settings/billing" style={{ padding: '6px 8px', borderRadius: 6 }}>Billing</a>
        </nav>
      </aside>
      <main style={{ flex: 1, padding: 32, maxWidth: 640 }}>
        <h1 style={{ fontSize: 20, fontWeight: 600, marginBottom: 24 }}>Profile</h1>
        <form style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <div>
            <label style={{ display: 'block', marginBottom: 6, fontSize: 14 }}>Name</label>
            <input type="text" style={{ width: '100%', padding: '8px 12px', border: '1px solid #d1d5db', borderRadius: 6 }} />
          </div>
          <div>
            <label style={{ display: 'block', marginBottom: 6, fontSize: 14 }}>Email</label>
            <input type="email" style={{ width: '100%', padding: '8px 12px', border: '1px solid #d1d5db', borderRadius: 6 }} />
          </div>
          <button type="submit" style={{ alignSelf: 'flex-start', padding: '8px 16px', background: '#1d4ed8', color: '#fff', border: 'none', borderRadius: 8, cursor: 'pointer' }}>
            Save changes
          </button>
        </form>
      </main>
    </div>
  );
}

```

--------------------------------

### Color Palette System CSS

Source: https://context7.com/cyxzdev/uncodixfy/llms.txt

Defines CSS custom properties for color palettes. Prioritize existing project colors, then select one curated palette (Void Space, Obsidian Depth, or Porcelain Clean). Avoid inventing color combinations.

```css
/* Priority 1: Use existing project colors (search the codebase first) */

/* Priority 2: Pick ONE dark palette — example: Void Space (GitHub-inspired) */
:root {
  --bg:        #0d1117;
  --surface:   #161b22;
  --primary:   #58a6ff;
  --secondary: #79c0ff;
  --accent:    #f78166;
  --text:      #c9d1d9;
}
```

```css
/* Priority 2 alt: Obsidian Depth (high contrast dark) */
:root {
  --bg:        #0f0f0f;
  --surface:   #1a1a1a;
  --primary:   #00d4aa;
  --secondary: #00a3cc;
  --accent:    #ff6b9d;
  --text:      #f5f5f5;
}
```

```css
/* Priority 2 alt: Porcelain Clean (light, minimal) */
:root {
  --bg:        #f9fafb;
  --surface:   #ffffff;
  --primary:   #4f46e5;
  --secondary: #8b5cf6;
  --accent:    #ec4899;
  --text:      #111827;
}
```

```css
/* Priority 3: NEVER do this */
:root {
  --primary: #3b82f6;   /* random blue — NO */
  --accent:  #10b981;   /* random green — NO */
  /* invented combinations without palette reference — BANNED */
}
```

--------------------------------

### CSS Standards for Shadows

Source: https://context7.com/cyxzdev/uncodixfy/llms.txt

Illustrates the correct CSS for elevated elements using a subtle box-shadow. Explicitly contrasts this with a banned, overly dramatic shadow value.

```css
/* Shadow — correct */
.elevated {
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  /* NEVER: 0 24px 60px rgba(0,0,0,0.35) */
}
```

--------------------------------

### CSS Standards for Transitions

Source: https://context7.com/cyxzdev/uncodixfy/llms.txt

Specifies correct CSS for interactive element transitions, using a simple background transition. Prohibits transform animations and bouncy effects.

```css
/* Transition — correct */
.interactive {
  transition: background 150ms ease;
  /* NEVER: transform animations, bouncy effects, translateX hover */
}
```

--------------------------------

### CSS Standards for Spacing

Source: https://context7.com/cyxzdev/uncodixfy/llms.txt

Defines correct CSS for spacing using a predefined scale (4/8/12/16/24/32px). Ensures consistent padding application.

```css
/* Spacing scale — correct */
.section { padding: 24px; }   /* 4/8/12/16/24/32px scale ONLY */
```

--------------------------------

### CSS Standards for Button

Source: https://context7.com/cyxzdev/uncodixfy/llms.txt

Provides correct CSS for a button, focusing on a maximum border-radius and solid background fill. Avoids pill shapes and gradients.

```css
/* Button — correct */
.button {
  border-radius: 8px;     /* 8-10px MAX — NOT pill shape */
  background: #1d4ed8;    /* solid fill — NO gradient */
  padding: 8px 16px;
}
```

--------------------------------

### SKILL.md Agent Skill Definition

Source: https://context7.com/cyxzdev/uncodixfy/llms.txt

Defines an AI agent skill named 'uncodixfy' for use with compatible agents like Claude Code. This skill enforces clean, human-designed UI aesthetics instead of typical AI-generated patterns.

```yaml
---
name: uncodixfy
description: >
  Prevents generic AI/Codex UI patterns when generating frontend code.
  Use this skill whenever generating HTML, CSS, React, Vue, Svelte, or
  any frontend UI code to enforce clean, human-designed aesthetics
  inspired by Linear, Raycast, Stripe, and GitHub instead of typical
  AI-generated UI.
---
```

--------------------------------

### Disallowed Team Note Card (HTML)

Source: https://github.com/cyxzdev/uncodixfy/blob/main/Uncodixfy.md

This HTML structure for a team note card is a 'BIG no'. Avoid using `<small>` tags for emphasis and ensure strong visual hierarchy.

```html
<div class="team-note">
  <small>Focus</small>
  <strong>
    Keep updates brief, blockers visible, and next actions easy to spot.
  </strong>
</div>
```

--------------------------------

### Disallowed Headline Structure (HTML)

Source: https://github.com/cyxzdev/uncodixfy/blob/main/Uncodixfy.md

This HTML structure for a headline is explicitly disallowed. Avoid using `<small>` tags for headers and ensure a strict, readable layout.

```html
<div class="headline">
  <small>Team Command</small>
  <h2>One place to track what matters today.</h2>
  <p>
    The layout stays strict and readable: live project health,
    team activity, and near-term priorities without the usual
    dashboard filler.
  </p>
</div>
```

--------------------------------

### CSS Standards for Sidebar

Source: https://context7.com/cyxzdev/uncodixfy/llms.txt

Defines the correct CSS for a sidebar component, emphasizing fixed width, solid background, and a simple border. Avoids floating shells and rounded outer corners.

```css
/* Sidebar — correct */
.sidebar {
  width: 248px;           /* NOT 280px+ with brand block */
  background: #1a1a1a;
  border-right: 1px solid #2a2a2a;
  /* NO floating shell, NO rounded outer corners */
}
```

--------------------------------

### CSS Standards for Card

Source: https://context7.com/cyxzdev/uncodixfy/llms.txt

Specifies correct CSS for a card component, including controlled border-radius and subtle box-shadow. Explicitly prohibits glow, floating effects, and glass backgrounds.

```css
/* Card — correct */
.card {
  border-radius: 8px;     /* 8-12px MAX — NOT 20-32px */
  border: 1px solid #2a2a2a;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);  /* subtle ONLY */
  /* NO glow, NO floating effect, NO glass background */
}
```

--------------------------------

### CSS Standards for Typography

Source: https://context7.com/cyxzdev/uncodixfy/llms.txt

Defines correct CSS for body typography, specifying a system font stack, a standard body font size, and line height. Avoids common AI-default fonts like Inter or Roboto.

```css
/* Typography — correct */
body {
  font-family: system-ui, sans-serif;  /* NO Inter/Roboto/Arial defaults */
  font-size: 15px;        /* 14-16px body */
  line-height: 1.5;
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.