docs: refactor README branding and positioning

[let-sunny]

Summary

#72 — README 브랜딩/포지셔닝 리팩터

Changes

• Single value proposition: "Predicts where your Figma design will break when AI implements it"
• Calibration promoted: From buried feature to "Why CanICode" core section
• Badges: 7 → 3 (npm, CI, Release)
• Structure: Why → Getting Started → What It Checks → Installation details
• Getting Started: Primary entry (web app + CLI) prominent, channels in expandable section
• Roadmap removed: 8 completed phases → Contributing section with fixture sharing CTA
• Categories updated: New 5-category table (Structure 9, Token 7, Component 4, Naming 5, Behavior 4)

Principles from issue

• Hierarchy: existence reason > how it works > where to use it
• One-line test: first two lines should explain what the product does
• Channels are implementation details, not product identity

Closes #72

Test plan

• Visual review of rendered README on GitHub

🤖 Generated with Claude Code

Summary by CodeRabbit

• Documentation
  • Updated header messaging and removed top-center badges/links
  • Replaced “How It Works” with “Why CanICode”: 29 rules across 5 dimensions and revised calibration description
  • Added “What It Checks” overview (5 categories) and clarified score direction
  • Streamlined Getting Started with “Quickest way”, an “All channels” table, and a CLI vs. MCP comparison
  • Reorganized Installation and Design-to-Code docs; replaced Roadmap with Contributing guidance

[coderabbitai]

📝 Walkthrough

Walkthrough

The README was refocused: header and badges removed, tagline rewritten to claim predicting where Figma designs will break during AI implementation, rules condensed from 32/6 to 29/5, calibration elevated to a 6‑agent HTML→pixel-compare pipeline, and Getting Started/Installation reorganized with new "What It Checks" and contributing guidance.

Changes

Cohort / File(s)	Summary
README Header & Tagline README.md	Removed top-center badges (Pages, Plugin, MCP, Action); replaced multi-line product claims with a single focused tagline about predicting Figma→AI breakage and implementation difficulty.
Rules & Validation README.md	Replaced "How It Works" with "Why CanICode"; updated rules from 32 rules/6 categories to 29 rules across 5 dimensions (Structure, Token, Component, Naming, Behavior); changed validation to a 6-agent calibration pipeline that converts designs to HTML and uses pixel-level similarity via visual-compare, scoped to community fixtures.
Getting Started / Installation README.md	Rewrote "Getting Started" to a "Quickest way" entry and an "All channels" table; moved and condensed installation and "Design to Code" instructions; added inline CLI vs MCP comparison table including token requirements.
What It Checks README.md	Added explicit "What It Checks" section listing 5 categories with rule counts and a classification note.
Roadmap → Contributing README.md	Removed the Roadmap section and replaced it with a Contributing section linking to a community prompt for sharing Figma designs to calibrate scoring.
Content organization / copy edits README.md	Reordered sections to emphasize core value (why) before channels (where/how); removed prior "How It Works" phrasing (runner/converter/critic/arbitrator) and simplified messaging throughout.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

• docs: update docs and templates for category reclassification #84 — Mirrors the rule taxonomy change (6 categories → 5 dimensions) and updates associated rule listings and validation descriptions.
• docs: MCP vs CLI feature comparison (#20) #26 — Overlaps on README content adding/updating the "CLI vs MCP" feature-comparison details.

Poem

🐰 I hopped through headings, nudged the tagline bright,

I trimmed the badges, set the purpose right.
Five rules lined up, a calibration tune,
Pixel‑perfect checks beneath the moon.
Hop on, dear reader — the README's light and tight.

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately and specifically describes the main change: refactoring the README to address branding and positioning—the core objective of this pull request.
Linked Issues check	✅ Passed	The pull request successfully meets all coding requirements from issue #72: establishes a single value proposition, reorders content hierarchy, creates a primary entry point, elevates calibration, consolidates lead statements, simplifies badges, and replaces roadmap with contributing CTA.
Out of Scope Changes check	✅ Passed	All changes remain within scope of the README refactor objective; no unrelated code modifications or out-of-scope alterations were introduced.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch docs/readme-rebrand-72

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@README.md`:
- Line 68: The table's internal link to "Claude Code Skill" points to
`#claude-code-skill` but the content is inside a <details>/<summary> which doesn't
generate that anchor; update the doc so the anchor exists by adding an explicit
markdown heading or HTML anchor before the <details> block (e.g., add a "###
Claude Code Skill" or an <a id="claude-code-skill"></a> immediately above the
<details>), and ensure the table link text "Claude Code Skill" matches that
anchor exactly; modify the heading/anchor near the existing <details>/<summary>
block (the block containing the Claude Code Skill content) rather than changing
the table link.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: 6f3909bc-833e-4e4f-acab-fe8f2707c340

📥 Commits

Reviewing files that changed from the base of the PR and between fd664de and 480fb9e.

📒 Files selected for processing (1)

• README.md

[coderabbitai]

♻️ Duplicate comments (1)

README.md (1)

68-68: ⚠️ Potential issue | 🟡 Minor

Fix broken internal navigation link for "Claude Code Skill."

The table references "Claude Code Skill" but the corresponding section (lines 192-200) uses a <details>/<summary> structure that doesn't generate the #claude-code-skill anchor on GitHub.

📝 Suggested fix

Add an explicit anchor before the <details> block at line 191:

+<a id="claude-code-skill"></a>
 <details>
 <summary><strong>Claude Code Skill</strong> (lightweight, no MCP install)</summary>

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@README.md` at line 68, The "Claude Code Skill" table link points to the
anchor "#claude-code-skill" but the current <details>/<summary> block for that
section does not create that anchor; add an explicit HTML anchor element with
id/name "claude-code-skill" immediately before the <details> block that contains
the "Claude Code Skill" summary so the table link resolves correctly (i.e.,
insert an anchor with id="claude-code-skill" just above the details/summary for
Claude Code Skill).

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Duplicate comments:
In `@README.md`:
- Line 68: The "Claude Code Skill" table link points to the anchor
"#claude-code-skill" but the current <details>/<summary> block for that section
does not create that anchor; add an explicit HTML anchor element with id/name
"claude-code-skill" immediately before the <details> block that contains the
"Claude Code Skill" summary so the table link resolves correctly (i.e., insert
an anchor with id="claude-code-skill" just above the details/summary for Claude
Code Skill).

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: 8cb3e0bf-6638-4f57-86af-19270a2e645c

📥 Commits

Reviewing files that changed from the base of the PR and between 480fb9e and 7a4b62c.

📒 Files selected for processing (1)

• README.md