wormclaude 1.0.119 → 1.0.121

package/skills/docx/skill.md

@@ -1,593 +0,0 @@
----
-name: docx
-description: "Reach for this skill any time a user needs to build, open, modify, or otherwise work with Word documents (.docx files). It applies whenever someone mentions a 'Word doc', 'word document', or '.docx', or asks for polished documents featuring elements such as tables of contents, headings, page numbers, or letterheads. It also covers pulling out or rearranging material from .docx files, adding or swapping images, running find-and-replace inside Word files, handling tracked changes or comments, and turning raw content into a finished Word document. Whenever the request is for a 'report', 'memo', 'letter', 'template', or any comparable Word/.docx deliverable, this skill fits. Avoid it for PDFs, spreadsheets, Google Docs, or unrelated programming work."
-license: WormClaude
----
-
-# DOCX creation, editing, and analysis
-
-## Overview
-
-Under the hood, a .docx is simply a ZIP package that bundles together a set of XML files.
-
-## Quick Reference
-
-| Task | Approach |
-|------|----------|
-| Read/analyze content | `extract-text`, or unpack for raw XML |
-| Create new document | Use `docx-js` - see Creating New Documents below |
-| Edit existing document | Unpack → edit XML → repack - see Editing Existing Documents below |
-
-### Converting .doc to .docx
-
-Older `.doc` files need to be converted to the newer format first before any editing can happen:
-
-```bash
-python scripts/office/soffice.py --headless --convert-to docx document.doc
-```
-
-### Reading Content
-
-```bash
-# Text extraction as markdown
-extract-text document.docx
-
-# Show tracked changes instead of accepting them
-pandoc --track-changes=all document.docx -o output.md
-
-# Raw XML access
-python scripts/office/unpack.py document.docx unpacked/
-```
-
-### Converting to Images
-
-```bash
-python scripts/office/soffice.py --headless --convert-to pdf document.docx
-pdftoppm -jpeg -r 150 document.pdf page
-```
-
-### Accepting Tracked Changes
-
-To generate a clean copy in which every tracked change has been accepted (LibreOffice is needed):
-
-```bash
-python scripts/accept_changes.py input.docx output.docx
-```
-
----
-
-## Creating New Documents
-
-Build .docx files in JavaScript and run validation afterward. Install with: `npm install -g docx`
-
-### Setup
-```javascript
-const { Document, Packer, Paragraph, TextRun, Table, TableRow, TableCell, ImageRun,
-        Header, Footer, AlignmentType, PageOrientation, LevelFormat, ExternalHyperlink,
-        InternalHyperlink, Bookmark, FootnoteReferenceRun, PositionalTab,
-        PositionalTabAlignment, PositionalTabRelativeTo, PositionalTabLeader,
-        TabStopType, TabStopPosition, Column, SectionType,
-        TableOfContents, HeadingLevel, BorderStyle, WidthType, ShadingType,
-        VerticalAlign, PageNumber, PageBreak } = require('docx');
-
-const doc = new Document({ sections: [{ children: [/* content */] }] });
-Packer.toBuffer(doc).then(buffer => fs.writeFileSync("doc.docx", buffer));
-```
-
-### Validation
-Once the file exists, check that it is valid. Should validation report problems, unpack the archive, correct the XML, and pack it back up.
-```bash
-python scripts/office/validate.py doc.docx
-```
-
-### Page Size
-
-```javascript
-// CRITICAL: docx-js defaults to A4, not US Letter
-// Always set page size explicitly for consistent results
-sections: [{
-  properties: {
-    page: {
-      size: {
-        width: 12240,   // 8.5 inches in DXA
-        height: 15840   // 11 inches in DXA
-      },
-      margin: { top: 1440, right: 1440, bottom: 1440, left: 1440 } // 1 inch margins
-    }
-  },
-  children: [/* content */]
-}]
-```
-
-**Common page sizes (DXA units, 1440 DXA = 1 inch):**
-
-| Paper | Width | Height | Content Width (1" margins) |
-|-------|-------|--------|---------------------------|
-| US Letter | 12,240 | 15,840 | 9,360 |
-| A4 (default) | 11,906 | 16,838 | 9,026 |
-
-**Landscape orientation:** because docx-js flips width and height on its own behind the scenes, supply the portrait measurements and let the library perform the swap for you:
-```javascript
-size: {
-  width: 12240,   // Pass SHORT edge as width
-  height: 15840,  // Pass LONG edge as height
-  orientation: PageOrientation.LANDSCAPE  // docx-js swaps them in the XML
-},
-// Content width = 15840 - left margin - right margin (uses the long edge)
-```
-
-### Styles (Override Built-in Headings)
-
-Default to Arial since it is available everywhere. Leave heading text black so it stays easy to read.
-
-```javascript
-const doc = new Document({
-  styles: {
-    default: { document: { run: { font: "Arial", size: 24 } } }, // 12pt default
-    paragraphStyles: [
-      // IMPORTANT: Use exact IDs to override built-in styles
-      { id: "Heading1", name: "Heading 1", basedOn: "Normal", next: "Normal", quickFormat: true,
-        run: { size: 32, bold: true, font: "Arial" },
-        paragraph: { spacing: { before: 240, after: 240 }, outlineLevel: 0 } }, // outlineLevel required for TOC
-      { id: "Heading2", name: "Heading 2", basedOn: "Normal", next: "Normal", quickFormat: true,
-        run: { size: 28, bold: true, font: "Arial" },
-        paragraph: { spacing: { before: 180, after: 180 }, outlineLevel: 1 } },
-    ]
-  },
-  sections: [{
-    children: [
-      new Paragraph({ heading: HeadingLevel.HEADING_1, children: [new TextRun("Title")] }),
-    ]
-  }]
-});
-```
-
-### Lists (NEVER use unicode bullets)
-
-```javascript
-// ❌ WRONG - never manually insert bullet characters
-new Paragraph({ children: [new TextRun("• Item")] })  // BAD
-new Paragraph({ children: [new TextRun("\u2022 Item")] })  // BAD
-
-// ✅ CORRECT - use numbering config with LevelFormat.BULLET
-const doc = new Document({
-  numbering: {
-    config: [
-      { reference: "bullets",
-        levels: [{ level: 0, format: LevelFormat.BULLET, text: "•", alignment: AlignmentType.LEFT,
-          style: { paragraph: { indent: { left: 720, hanging: 360 } } } }] },
-      { reference: "numbers",
-        levels: [{ level: 0, format: LevelFormat.DECIMAL, text: "%1.", alignment: AlignmentType.LEFT,
-          style: { paragraph: { indent: { left: 720, hanging: 360 } } } }] },
-    ]
-  },
-  sections: [{
-    children: [
-      new Paragraph({ numbering: { reference: "bullets", level: 0 },
-        children: [new TextRun("Bullet item")] }),
-      new Paragraph({ numbering: { reference: "numbers", level: 0 },
-        children: [new TextRun("Numbered item")] }),
-    ]
-  }]
-});
-
-// ⚠️ Each reference creates INDEPENDENT numbering
-// Same reference = continues (1,2,3 then 4,5,6)
-// Different reference = restarts (1,2,3 then 1,2,3)
-```
-
-### Tables
-
-**CRITICAL: Tables need dual widths** - specify `columnWidths` at the table level AND a `width` on every cell. If either one is missing, certain platforms will display the table wrong.
-
-```javascript
-// CRITICAL: Always set table width for consistent rendering
-// CRITICAL: Use ShadingType.CLEAR (not SOLID) to prevent black backgrounds
-const border = { style: BorderStyle.SINGLE, size: 1, color: "CCCCCC" };
-const borders = { top: border, bottom: border, left: border, right: border };
-
-new Table({
-  width: { size: 9360, type: WidthType.DXA }, // Always use DXA (percentages break in Google Docs)
-  columnWidths: [4680, 4680], // Must sum to table width (DXA: 1440 = 1 inch)
-  rows: [
-    new TableRow({
-      children: [
-        new TableCell({
-          borders,
-          width: { size: 4680, type: WidthType.DXA }, // Also set on each cell
-          shading: { fill: "D5E8F0", type: ShadingType.CLEAR }, // CLEAR not SOLID
-          margins: { top: 80, bottom: 80, left: 120, right: 120 }, // Cell padding (internal, not added to width)
-          children: [new Paragraph({ children: [new TextRun("Cell")] })]
-        })
-      ]
-    })
-  ]
-})
-```
-
-**Table width calculation:**
-
-Stick to `WidthType.DXA` at all times — `WidthType.PERCENTAGE` fails to render properly in Google Docs.
-
-```javascript
-// Table width = sum of columnWidths = content width
-// US Letter with 1" margins: 12240 - 2880 = 9360 DXA
-width: { size: 9360, type: WidthType.DXA },
-columnWidths: [7000, 2360]  // Must sum to table width
-```
-
-**Width rules:**
-- **Always use `WidthType.DXA`** — steer clear of `WidthType.PERCENTAGE`, which Google Docs cannot handle
-- The table's width has to match the total of its `columnWidths`
-- Each cell `width` needs to line up with its matching `columnWidth`
-- Cell `margins` act as inner padding — they shrink the usable content area rather than enlarging the cell
-- To make a table span the full page, set its width to the content width (page width less the left and right margins)
-
-### Images
-
-```javascript
-// CRITICAL: type parameter is REQUIRED
-new Paragraph({
-  children: [new ImageRun({
-    type: "png", // Required: png, jpg, jpeg, gif, bmp, svg
-    data: fs.readFileSync("image.png"),
-    transformation: { width: 200, height: 150 },
-    altText: { title: "Title", description: "Desc", name: "Name" } // All three required
-  })]
-})
-```
-
-### Page Breaks
-
-```javascript
-// CRITICAL: PageBreak must be inside a Paragraph
-new Paragraph({ children: [new PageBreak()] })
-
-// Or use pageBreakBefore
-new Paragraph({ pageBreakBefore: true, children: [new TextRun("New page")] })
-```
-
-### Hyperlinks
-
-```javascript
-// External link
-new Paragraph({
-  children: [new ExternalHyperlink({
-    children: [new TextRun({ text: "Click here", style: "Hyperlink" })],
-    link: "https://example.com",
-  })]
-})
-
-// Internal link (bookmark + reference)
-// 1. Create bookmark at destination
-new Paragraph({ heading: HeadingLevel.HEADING_1, children: [
-  new Bookmark({ id: "chapter1", children: [new TextRun("Chapter 1")] }),
-]})
-// 2. Link to it
-new Paragraph({ children: [new InternalHyperlink({
-  children: [new TextRun({ text: "See Chapter 1", style: "Hyperlink" })],
-  anchor: "chapter1",
-})]})
-```
-
-### Footnotes
-
-```javascript
-const doc = new Document({
-  footnotes: {
-    1: { children: [new Paragraph("Source: Annual Report 2024")] },
-    2: { children: [new Paragraph("See appendix for methodology")] },
-  },
-  sections: [{
-    children: [new Paragraph({
-      children: [
-        new TextRun("Revenue grew 15%"),
-        new FootnoteReferenceRun(1),
-        new TextRun(" using adjusted metrics"),
-        new FootnoteReferenceRun(2),
-      ],
-    })]
-  }]
-});
-```
-
-### Tab Stops
-
-```javascript
-// Right-align text on same line (e.g., date opposite a title)
-new Paragraph({
-  children: [
-    new TextRun("Company Name"),
-    new TextRun("\tJanuary 2025"),
-  ],
-  tabStops: [{ type: TabStopType.RIGHT, position: TabStopPosition.MAX }],
-})
-
-// Dot leader (e.g., TOC-style)
-new Paragraph({
-  children: [
-    new TextRun("Introduction"),
-    new TextRun({ children: [
-      new PositionalTab({
-        alignment: PositionalTabAlignment.RIGHT,
-        relativeTo: PositionalTabRelativeTo.MARGIN,
-        leader: PositionalTabLeader.DOT,
-      }),
-      "3",
-    ]}),
-  ],
-})
-```
-
-### Multi-Column Layouts
-
-```javascript
-// Equal-width columns
-sections: [{
-  properties: {
-    column: {
-      count: 2,          // number of columns
-      space: 720,        // gap between columns in DXA (720 = 0.5 inch)
-      equalWidth: true,
-      separate: true,    // vertical line between columns
-    },
-  },
-  children: [/* content flows naturally across columns */]
-}]
-
-// Custom-width columns (equalWidth must be false)
-sections: [{
-  properties: {
-    column: {
-      equalWidth: false,
-      children: [
-        new Column({ width: 5400, space: 720 }),
-        new Column({ width: 3240 }),
-      ],
-    },
-  },
-  children: [/* content */]
-}]
-```
-
-To push content into the next column, start a fresh section with `type: SectionType.NEXT_COLUMN`.
-
-### Table of Contents
-
-```javascript
-// CRITICAL: Headings must use HeadingLevel ONLY - no custom styles
-new TableOfContents("Table of Contents", { hyperlink: true, headingStyleRange: "1-3" })
-```
-
-### Headers/Footers
-
-```javascript
-sections: [{
-  properties: {
-    page: { margin: { top: 1440, right: 1440, bottom: 1440, left: 1440 } } // 1440 = 1 inch
-  },
-  headers: {
-    default: new Header({ children: [new Paragraph({ children: [new TextRun("Header")] })] })
-  },
-  footers: {
-    default: new Footer({ children: [new Paragraph({
-      children: [new TextRun("Page "), new TextRun({ children: [PageNumber.CURRENT] })]
-    })] })
-  },
-  children: [/* content */]
-}]
-```
-
-### Critical Rules for docx-js
-
-- **Set page size explicitly** - the docx-js default is A4, so switch to US Letter (12240 x 15840 DXA) when producing US documents
-- **Landscape: pass portrait dimensions** - since docx-js handles the width/height swap itself, give the short edge as `width`, the long edge as `height`, and add `orientation: PageOrientation.LANDSCAPE`
-- **Never use `\n`** - break text apart into individual Paragraph elements instead
-- **Never use unicode bullets** - rely on `LevelFormat.BULLET` together with a numbering config
-- **PageBreak must be in Paragraph** - on its own it generates invalid XML
-- **ImageRun requires `type`** - always name the format: png, jpg, and so on
-- **Always set table `width` with DXA** - stay away from `WidthType.PERCENTAGE`, which Google Docs cannot render
-- **Tables need dual widths** - both the `columnWidths` array and each cell `width`, and the two must agree
-- **Table width = sum of columnWidths** - with DXA the figures have to total up precisely
-- **Always add cell margins** - `margins: { top: 80, bottom: 80, left: 120, right: 120 }` gives comfortable padding
-- **Use `ShadingType.CLEAR`** - reserve SOLID; it should never be used for table shading
-- **Never use tables as dividers/rules** - cells carry a minimum height and show up as empty boxes (headers and footers included); instead apply `border: { bottom: { style: BorderStyle.SINGLE, size: 6, color: "2E75B6", space: 1 } }` to a Paragraph. For a two-column footer, reach for tab stops (see the Tab Stops section) rather than a table
-- **TOC requires HeadingLevel only** - heading paragraphs must not carry custom styles
-- **Override built-in styles** - reference the exact IDs: "Heading1", "Heading2", and so on
-- **Include `outlineLevel`** - the TOC depends on it (0 for H1, 1 for H2, etc.)
-
----
-
-## Editing Existing Documents
-
-**Work through these 3 steps in sequence.**
-
-### Step 1: Unpack
-```bash
-python scripts/office/unpack.py document.docx unpacked/
-```
-This pulls out the XML, formats it for readability, combines neighboring runs, and rewrites smart quotes as XML entities (`“` and friends) so editing does not corrupt them. Pass `--merge-runs false` if you would rather not merge runs.
-
-### Step 2: Edit XML
-
-Modify the files under `unpacked/word/`. Consult the XML Reference further down for the relevant patterns.
-
-**Set the author to "WormClaude"** on tracked changes and comments, unless the user specifically asks for another name.
-
-**Do your string replacements with the Edit tool directly — skip Python scripts.** Such scripts only add needless complexity, whereas the Edit tool makes the exact replacement visible.
-
-**CRITICAL: Use smart quotes for new content.** Whenever you insert text containing apostrophes or quotation marks, write them as XML entities so they come out as smart quotes:
-```xml
-<!-- Use these entities for professional typography -->
-<w:t>Here&#x2019;s a quote: &#x201C;Hello&#x201D;</w:t>
-```
-| Entity | Character |
-|--------|-----------|
-| `&#x2018;` | ‘ (left single) |
-| `&#x2019;` | ’ (right single / apostrophe) |
-| `&#x201C;` | “ (left double) |
-| `&#x201D;` | ” (right double) |
-
-**Adding comments:** Let `comment.py` take care of the boilerplate that spans several XML files (the text you supply must already be XML-escaped):
-```bash
-python scripts/comment.py unpacked/ 0 "Comment text with &amp; and &#x2019;"
-python scripts/comment.py unpacked/ 1 "Reply text" --parent 0  # reply to comment 0
-python scripts/comment.py unpacked/ 0 "Text" --author "Custom Author"  # custom author name
-```
-Afterward, place the markers in document.xml (refer to Comments in the XML Reference).
-
-### Step 3: Pack
-```bash
-python scripts/office/pack.py unpacked/ output.docx --original document.docx
-```
-This runs validation with auto-repair, compresses the XML, and assembles the DOCX. Add `--validate false` to bypass it.
-
-**Auto-repair handles:**
-- `durableId` values >= 0x7FFFFFFF (a fresh valid ID is generated)
-- `<w:t>` elements that contain whitespace but lack `xml:space="preserve"`
-
-**Auto-repair does NOT handle:**
-- Broken XML, illegal element nesting, absent relationships, or schema violations
-
-### Common Pitfalls
-
-- **Replace entire `<w:r>` elements**: To record a tracked change, swap out the complete `<w:r>...</w:r>` block for sibling `<w:del>...<w:ins>...` elements. Never embed tracked-change tags within a run.
-- **Preserve `<w:rPr>` formatting**: Carry the source run's `<w:rPr>` block over into your tracked-change runs so bold, font size, and similar attributes stay intact.
-
----
-
-## XML Reference
-
-### Schema Compliance
-
-- **Element order in `<w:pPr>`**: arrange as `<w:pStyle>`, `<w:numPr>`, `<w:spacing>`, `<w:ind>`, `<w:jc>`, with `<w:rPr>` coming last
-- **Whitespace**: any `<w:t>` that has leading or trailing spaces needs `xml:space="preserve"`
-- **RSIDs**: have to be 8 hex digits (for instance, `00AB1234`)
-
-### Tracked Changes
-
-**Insertion:**
-```xml
-<w:ins w:id="1" w:author="WormClaude" w:date="2025-01-01T00:00:00Z">
-  <w:r><w:t>inserted text</w:t></w:r>
-</w:ins>
-```
-
-**Deletion:**
-```xml
-<w:del w:id="2" w:author="WormClaude" w:date="2025-01-01T00:00:00Z">
-  <w:r><w:delText>deleted text</w:delText></w:r>
-</w:del>
-```
-
-**Inside `<w:del>`**: swap `<w:t>` for `<w:delText>`, and `<w:instrText>` for `<w:delInstrText>`.
-
-**Minimal edits** - flag only the portion that actually changes:
-```xml
-<!-- Change "30 days" to "60 days" -->
-<w:r><w:t>The term is </w:t></w:r>
-<w:del w:id="1" w:author="WormClaude" w:date="...">
-  <w:r><w:delText>30</w:delText></w:r>
-</w:del>
-<w:ins w:id="2" w:author="WormClaude" w:date="...">
-  <w:r><w:t>60</w:t></w:r>
-</w:ins>
-<w:r><w:t> days.</w:t></w:r>
-```
-
-**Deleting entire paragraphs/list items** - whenever you strip out every bit of content from a paragraph, mark the paragraph mark itself as deleted as well, which causes it to merge into the paragraph that follows. Insert `<w:del/>` within `<w:pPr><w:rPr>`:
-```xml
-<w:p>
-  <w:pPr>
-    <w:numPr>...</w:numPr>  <!-- list numbering if present -->
-    <w:rPr>
-      <w:del w:id="1" w:author="WormClaude" w:date="2025-01-01T00:00:00Z"/>
-    </w:rPr>
-  </w:pPr>
-  <w:del w:id="2" w:author="WormClaude" w:date="2025-01-01T00:00:00Z">
-    <w:r><w:delText>Entire paragraph content being deleted...</w:delText></w:r>
-  </w:del>
-</w:p>
-```
-Omit that `<w:del/>` from `<w:pPr><w:rPr>` and accepting the changes will leave behind a blank paragraph or list item.
-
-**Rejecting another author's insertion** - tuck your deletion inside their insertion:
-```xml
-<w:ins w:author="Jane" w:id="5">
-  <w:del w:author="WormClaude" w:id="10">
-    <w:r><w:delText>their inserted text</w:delText></w:r>
-  </w:del>
-</w:ins>
-```
-
-**Restoring another author's deletion** - append an insertion afterward and leave their deletion untouched:
-```xml
-<w:del w:author="Jane" w:id="5">
-  <w:r><w:delText>deleted text</w:delText></w:r>
-</w:del>
-<w:ins w:author="WormClaude" w:id="10">
-  <w:r><w:t>deleted text</w:t></w:r>
-</w:ins>
-```
-
-### Comments
-
-Once `comment.py` has run (see Step 2), insert the markers into document.xml. To create a reply, supply the `--parent` flag and nest its markers within the parent's.
-
-**CRITICAL: `<w:commentRangeStart>` and `<w:commentRangeEnd>` sit as siblings of `<w:r>` — never place them inside a `<w:r>`.**
-
-```xml
-<!-- Comment markers are direct children of w:p, never inside w:r -->
-<w:commentRangeStart w:id="0"/>
-<w:del w:id="1" w:author="WormClaude" w:date="2025-01-01T00:00:00Z">
-  <w:r><w:delText>deleted</w:delText></w:r>
-</w:del>
-<w:r><w:t> more text</w:t></w:r>
-<w:commentRangeEnd w:id="0"/>
-<w:r><w:rPr><w:rStyle w:val="CommentReference"/></w:rPr><w:commentReference w:id="0"/></w:r>
-
-<!-- Comment 0 with reply 1 nested inside -->
-<w:commentRangeStart w:id="0"/>
-  <w:commentRangeStart w:id="1"/>
-  <w:r><w:t>text</w:t></w:r>
-  <w:commentRangeEnd w:id="1"/>
-<w:commentRangeEnd w:id="0"/>
-<w:r><w:rPr><w:rStyle w:val="CommentReference"/></w:rPr><w:commentReference w:id="0"/></w:r>
-<w:r><w:rPr><w:rStyle w:val="CommentReference"/></w:rPr><w:commentReference w:id="1"/></w:r>
-```
-
-### Images
-
-1. Drop the image file into `word/media/`
-2. Register a relationship in `word/_rels/document.xml.rels`:
-```xml
-<Relationship Id="rId5" Type=".../image" Target="media/image1.png"/>
-```
-3. Declare the content type in `[Content_Types].xml`:
-```xml
-<Default Extension="png" ContentType="image/png"/>
-```
-4. Point to it from document.xml:
-```xml
-<w:drawing>
-  <wp:inline>
-    <wp:extent cx="914400" cy="914400"/>  <!-- EMUs: 914400 = 1 inch -->
-    <a:graphic>
-      <a:graphicData uri=".../picture">
-        <pic:pic>
-          <pic:blipFill><a:blip r:embed="rId5"/></pic:blipFill>
-        </pic:pic>
-      </a:graphicData>
-    </a:graphic>
-  </wp:inline>
-</w:drawing>
-```
-
----
-
-## Dependencies
-
-- **pandoc**: pulling text out of documents
-- **docx**: `npm install -g docx` (for authoring new documents)
-- **LibreOffice**: converting to PDF (set up automatically for sandboxed environments through `scripts/office/soffice.py`)
-- **Poppler**: provides `pdftoppm` for rendering images

package/skills/explain.md

@@ -1,14 +0,0 @@
----
-name: explain
-description: kodu satir satir acikla
-context: inline
----
-Verilen kodu net ve adim adim acikla.
-
-- Once bir cumleyle kodun GENEL amacini soyle (ne ise yariyor).
-- Sonra mantiksal bloklari sirayla ele al; her bloğun ne yaptigini ve NEDEN orada oldugunu acikla.
-- Onemli satirlarda: degisken/fonksiyonun rolu, akis (donguler, kosullar), girdi/cikti.
-- Dilin/cerceve'nin onemli kavramlarini (kapanis, async, pointer, decorator vb.) kisa kenar notuyla acikla.
-- Varsa gizli tuzaklari, kenar durumlari, performans veya guvenlik etkilerini belirt.
-- Gereksiz teori anlatma; kodun gercekten yaptigina bagli kal. Seviyeyi kullanicinin sorusuna gore ayarla (yeni baslayan ise daha sade).
-- Sonunda 1-2 satirla ozetle: "kisaca bu kod ...".

package/skills/frontend-design/SKILL.md

@@ -1,42 +0,0 @@
----
-name: frontend-design
-description: Build standout, ship-ready frontend interfaces with a strong design sensibility. Reach for this skill whenever someone needs web components, full pages, or applications built. Produces inventive, well-crafted code that steers clear of cookie-cutter AI looks.
-license: WormClaude
----
-
-This skill is your playbook for crafting memorable, ship-ready frontend interfaces that escape the generic "AI slop" look. Write genuine, functioning code while obsessing over visual detail and bold creative decisions.
-
-Expect the request to describe something to build: a single component, a page, a whole application, or an interface. It might also carry hints about the goal, the intended audience, or technical limits to respect.
-
-## Design Thinking
-
-Don't touch code until you've absorbed the context and locked in a DARING aesthetic stance:
-- **Purpose**: What is this interface actually for, and who will be reaching for it?
-- **Tone**: Go to a far end of the spectrum: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, and so on. The menu of flavors is huge. Treat these as springboards, then commit to one that genuinely fits the direction you've chosen.
-- **Constraints**: The technical givens (framework, performance, accessibility).
-- **Differentiation**: What makes this IMPOSSIBLE TO FORGET? What's the single detail that sticks with someone?
-
-**CRITICAL**: Settle on one coherent concept and carry it out cleanly. Loud maximalism and quiet minimalism are both valid - what counts is deliberate intent, not sheer volume.
-
-From there, ship real code (HTML/CSS/JS, React, Vue, etc.) that is:
-- Functional and ready for production
-- Visually arresting and memorable
-- Unified around a clear aesthetic stance
-- Painstakingly polished down to the last detail
-
-## Frontend Aesthetics Guidelines
-
-Pay attention to:
-- **Typography**: Reach for typefaces that are striking, singular, and full of personality. Skip the defaults like Arial and Inter and instead pick fonts that lift the whole design with their character. Set a bold display face against a clean, readable body face.
-- **Color & Theme**: Lock in one unified look. Lean on CSS variables to keep it consistent. A palette led by a strong dominant color with crisp accents beats a hesitant, evenly-spread one.
-- **Motion**: Bring in animation for both effects and micro-interactions. Reach for CSS-only approaches in plain HTML, and the Motion library in React where it's available. Spend your effort on the big moments: a single carefully choreographed page load with staggered reveals (animation-delay) lands harder than a scatter of tiny interactions. Lean on scroll triggers and hover states that catch people off guard.
-- **Spatial Composition**: Surprising layouts. Asymmetry. Overlap. Diagonal flow. Elements that break the grid. Either lavish whitespace OR deliberate density.
-- **Backgrounds & Visual Details**: Build atmosphere and depth instead of falling back on flat fills. Layer in effects and textures that suit the chosen look. Pull from techniques like gradient meshes, noise textures, geometric patterns, stacked transparencies, bold shadows, ornamental borders, custom cursors, and grain overlays.
-
-STAY AWAY FROM the telltale AI-generated look: tired font families (Inter, Roboto, Arial, system fonts), worn-out color schemes (especially purple gradients over white), foreseeable layouts and component shapes, and template-grade design with no real connection to its context.
-
-Read the brief with imagination and make surprising calls that feel purpose-built for the situation. Let no two designs repeat. Alternate light and dark themes, swap fonts, shift aesthetics. NEVER keep landing on the same safe pick (Space Grotesk, say) across generations.
-
-**IMPORTANT**: Scale the code's intricacy to the design intent. A maximalist concept calls for rich code packed with animation and effects. A minimal or refined concept calls for restraint, precision, and meticulous care over spacing, typography, and the small touches. The polish comes from realizing the vision fully.
-
-Keep in mind: WormClaude is capable of remarkable creative output. Don't play it safe, reveal what's genuinely possible when you think past the obvious and back a distinctive vision all the way.