From d33b705450f5587e3528438db008c768c5c9ab57 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Tue, 4 Jan 2022 05:07:24 +0900
Subject: [PATCH 1/2] update flags docs structure

---
 docs/flags/.gitignore                         |   4 +
 packages/support-flags/----disable/README.md  |   5 +-
 packages/support-flags/--action/README.md     |   5 +-
 packages/support-flags/--artwork/README.md    |  42 +------
 packages/support-flags/--as-avatar/README.md  |   8 +-
 packages/support-flags/--as-br/README.md      |  19 +--
 packages/support-flags/--as-button/README.md  |   8 +-
 packages/support-flags/--as-char/README.md    |  20 +--
 .../support-flags/--as-checkbox/README.md     |   9 +-
 packages/support-flags/--as-divider/README.md |   9 +-
 packages/support-flags/--as-h1/README.md      |  57 +--------
 packages/support-flags/--as-h2/README.md      |  57 +--------
 packages/support-flags/--as-h3/README.md      |  57 +--------
 packages/support-flags/--as-h4/README.md      |  57 +--------
 packages/support-flags/--as-h5/README.md      |  57 +--------
 packages/support-flags/--as-h6/README.md      |  57 +--------
 packages/support-flags/--as-input/README.md   |   9 +-
 packages/support-flags/--as-list/README.md    |   9 +-
 packages/support-flags/--as-mdi/README.md     |  13 +-
 packages/support-flags/--as-modal/README.md   |   9 +-
 packages/support-flags/--as-nbsp/README.md    |  38 +-----
 packages/support-flags/--as-p/README.md       |  50 +-------
 .../support-flags/--as-resizable/README.md    |   5 +-
 packages/support-flags/--as-size/README.md    |  10 +-
 packages/support-flags/--as-slider/README.md  |   9 +-
 packages/support-flags/--as-span/README.md    |  61 +--------
 .../support-flags/--as-text-group/README.md   |   5 +-
 packages/support-flags/--as-toggle/README.md  |   9 +-
 packages/support-flags/--as-wrap/README.md    |  17 +--
 .../support-flags/--break-color/README.md     |  10 +-
 .../support-flags/--break-component/README.md |  10 +-
 .../support-flags/--camera-display/README.md  |  12 +-
 packages/support-flags/--class/README.md      |   9 +-
 packages/support-flags/--content-id/README.md |   5 +-
 packages/support-flags/--cursor/README.md     |  14 +--
 .../--dynamic-container/README.md             |   4 +
 .../support-flags/--dynamic-item/README.md    |   4 +
 .../support-flags/--empty-content/README.md   |  10 +-
 packages/support-flags/--export-as/README.md  |   8 +-
 packages/support-flags/--export-gif/README.md |   7 +-
 packages/support-flags/--export-jpg/README.md |   4 +
 packages/support-flags/--export-pdf/README.md |   4 +
 packages/support-flags/--export-png/README.md |   4 +
 packages/support-flags/--export-svg/README.md |   4 +
 packages/support-flags/--fix-bottom/README.md |   9 +-
 packages/support-flags/--fix-height/README.md |  26 +---
 packages/support-flags/--fix-width/README.md  |  30 +----
 packages/support-flags/--hash/README.md       |  27 +---
 packages/support-flags/--height/README.md     | 119 +-----------------
 packages/support-flags/--href/README.md       |  12 +-
 packages/support-flags/--id/README.md         |  16 +--
 packages/support-flags/--ignore/README.md     |  13 +-
 .../support-flags/--is-input-caret/README.md  |   9 +-
 .../--is-native-android-ui/README.md          |   5 +-
 .../--is-native-ios-ui/README.md              |   5 +-
 packages/support-flags/--max-height/README.md |  38 +-----
 packages/support-flags/--max-width/README.md  |  38 +-----
 packages/support-flags/--media/README.md      |   4 +
 packages/support-flags/--min-height/README.md |  38 +-----
 packages/support-flags/--min-width/README.md  |  38 +-----
 packages/support-flags/--module/README.md     |   5 +-
 .../support-flags/--motion-on-hover/README.md |  11 +-
 packages/support-flags/--motion/README.md     |  11 +-
 packages/support-flags/--onclick/README.md    |   9 +-
 packages/support-flags/--overflow/README.md   |   5 +-
 .../support-flags/--position-fixed/README.md  |   5 +-
 .../support-flags/--position-sticky/README.md |   5 +-
 .../support-flags/--proc-ignore/README.md     |   5 +-
 packages/support-flags/--proc-skip/README.md  |   5 +-
 .../support-flags/--responsive-id/README.md   |  31 +----
 packages/support-flags/--root/README.md       |  20 +--
 packages/support-flags/--scope/README.md      |  25 +---
 packages/support-flags/--scroll/README.md     |   5 +-
 .../support-flags/--text-template/README.md   |   9 +-
 packages/support-flags/--use-flag/README.md   |   5 +-
 packages/support-flags/--video/README.md      |   4 +
 .../support-flags/--webview-src/README.md     |   5 +-
 packages/support-flags/--width/README.md      | 119 +-----------------
 .../--x-code-component/README.md              |   7 +-
 .../support-flags/--x-code-static/README.md   |   5 +-
 .../support-flags/--x-lottie-view/README.md   |   5 +-
 packages/support-flags/docs/----disable.md    |   1 +
 packages/support-flags/docs/--action.md       |   1 +
 packages/support-flags/docs/--artwork.md      |  40 ++++++
 packages/support-flags/docs/--as-avatar.md    |   6 +
 packages/support-flags/docs/--as-br.md        |  17 +++
 packages/support-flags/docs/--as-button.md    |   6 +
 packages/support-flags/docs/--as-char.md      |  18 +++
 packages/support-flags/docs/--as-checkbox.md  |   7 ++
 packages/support-flags/docs/--as-divider.md   |   7 ++
 packages/support-flags/docs/--as-h1.md        |  55 ++++++++
 packages/support-flags/docs/--as-h2.md        |  55 ++++++++
 packages/support-flags/docs/--as-h3.md        |  55 ++++++++
 packages/support-flags/docs/--as-h4.md        |  55 ++++++++
 packages/support-flags/docs/--as-h5.md        |  55 ++++++++
 packages/support-flags/docs/--as-h6.md        |  55 ++++++++
 packages/support-flags/docs/--as-input.md     |   7 ++
 packages/support-flags/docs/--as-list.md      |   7 ++
 packages/support-flags/docs/--as-mdi.md       |  11 ++
 packages/support-flags/docs/--as-modal.md     |   7 ++
 packages/support-flags/docs/--as-nbsp.md      |  36 ++++++
 packages/support-flags/docs/--as-p.md         |  48 +++++++
 packages/support-flags/docs/--as-resizable.md |   1 +
 packages/support-flags/docs/--as-size.md      |   8 ++
 packages/support-flags/docs/--as-slider.md    |   7 ++
 packages/support-flags/docs/--as-span.md      |  59 +++++++++
 .../support-flags/docs/--as-text-group.md     |   3 +
 packages/support-flags/docs/--as-toggle.md    |   7 ++
 packages/support-flags/docs/--as-wrap.md      |  15 +++
 packages/support-flags/docs/--break-color.md  |   8 ++
 .../support-flags/docs/--break-component.md   |   8 ++
 .../support-flags/docs/--camera-display.md    |  10 ++
 packages/support-flags/docs/--class.md        |   7 ++
 packages/support-flags/docs/--content-id.md   |   3 +
 packages/support-flags/docs/--cursor.md       |  12 ++
 .../support-flags/docs/--dynamic-container.md |   0
 packages/support-flags/docs/--dynamic-item.md |   0
 .../support-flags/docs/--empty-content.md     |   8 ++
 packages/support-flags/docs/--exact-height.md |  24 ++++
 packages/support-flags/docs/--exact-width.md  |  24 ++++
 packages/support-flags/docs/--export-as.md    |   6 +
 packages/support-flags/docs/--export-gif.md   |   5 +
 packages/support-flags/docs/--export-jpg.md   |   0
 packages/support-flags/docs/--export-pdf.md   |   0
 packages/support-flags/docs/--export-png.md   |   0
 packages/support-flags/docs/--export-svg.md   |   0
 packages/support-flags/docs/--export.md       |   0
 packages/support-flags/docs/--fix-bottom.md   |   7 ++
 packages/support-flags/docs/--fix-height.md   |  24 ++++
 packages/support-flags/docs/--fix-width.md    |  28 +++++
 packages/support-flags/docs/--hash.md         |  25 ++++
 packages/support-flags/docs/--height.md       | 117 +++++++++++++++++
 packages/support-flags/docs/--href.md         |  10 ++
 packages/support-flags/docs/--id.md           |  14 +++
 packages/support-flags/docs/--ignore.md       |  11 ++
 .../support-flags/docs/--is-input-caret.md    |   7 ++
 .../docs/--is-native-android-ui.md            |   3 +
 .../support-flags/docs/--is-native-ios-ui.md  |   3 +
 packages/support-flags/docs/--max-height.md   |  36 ++++++
 packages/support-flags/docs/--max-width.md    |  36 ++++++
 packages/support-flags/docs/--media.md        |   0
 packages/support-flags/docs/--min-height.md   |  36 ++++++
 packages/support-flags/docs/--min-width.md    |  36 ++++++
 packages/support-flags/docs/--module.md       |   3 +
 .../support-flags/docs/--motion-on-hover.md   |   9 ++
 packages/support-flags/docs/--motion.md       |   9 ++
 packages/support-flags/docs/--onclick.md      |   7 ++
 packages/support-flags/docs/--overflow.md     |   3 +
 .../support-flags/docs/--position-fixed.md    |   3 +
 .../support-flags/docs/--position-sticky.md   |   1 +
 packages/support-flags/docs/--proc-ignore.md  |   1 +
 packages/support-flags/docs/--proc-skip.md    |   1 +
 .../support-flags/docs/--responsive-id.md     |  29 +++++
 packages/support-flags/docs/--root.md         |  18 +++
 packages/support-flags/docs/--scope.md        |  23 ++++
 packages/support-flags/docs/--scroll.md       |   3 +
 .../support-flags/docs/--text-template.md     |   7 ++
 packages/support-flags/docs/--use-flag.md     |   3 +
 packages/support-flags/docs/--video.md        |   0
 packages/support-flags/docs/--webview-src.md  |   3 +
 packages/support-flags/docs/--width.md        | 117 +++++++++++++++++
 .../support-flags/docs/--x-code-component.md  |   5 +
 .../support-flags/docs/--x-code-static.md     |   3 +
 .../support-flags/docs/--x-lottie-view.md     |   1 +
 packages/support-flags/docs/README.md         |   5 +
 .../support-flags/docs/__readme_template__.md |   4 +
 packages/support-flags/docs/index.md          | 115 +++++++++++++++++
 .../support-flags/scripts/sanitize-readme.js  |  66 ++++++++++
 scripts/docs-copy/flags-api-docs.js           |  85 ++++++-------
 169 files changed, 1891 insertions(+), 1342 deletions(-)
 create mode 100644 docs/flags/.gitignore
 create mode 100644 packages/support-flags/docs/----disable.md
 create mode 100644 packages/support-flags/docs/--action.md
 create mode 100644 packages/support-flags/docs/--artwork.md
 create mode 100644 packages/support-flags/docs/--as-avatar.md
 create mode 100644 packages/support-flags/docs/--as-br.md
 create mode 100644 packages/support-flags/docs/--as-button.md
 create mode 100644 packages/support-flags/docs/--as-char.md
 create mode 100644 packages/support-flags/docs/--as-checkbox.md
 create mode 100644 packages/support-flags/docs/--as-divider.md
 create mode 100644 packages/support-flags/docs/--as-h1.md
 create mode 100644 packages/support-flags/docs/--as-h2.md
 create mode 100644 packages/support-flags/docs/--as-h3.md
 create mode 100644 packages/support-flags/docs/--as-h4.md
 create mode 100644 packages/support-flags/docs/--as-h5.md
 create mode 100644 packages/support-flags/docs/--as-h6.md
 create mode 100644 packages/support-flags/docs/--as-input.md
 create mode 100644 packages/support-flags/docs/--as-list.md
 create mode 100644 packages/support-flags/docs/--as-mdi.md
 create mode 100644 packages/support-flags/docs/--as-modal.md
 create mode 100644 packages/support-flags/docs/--as-nbsp.md
 create mode 100644 packages/support-flags/docs/--as-p.md
 create mode 100644 packages/support-flags/docs/--as-resizable.md
 create mode 100644 packages/support-flags/docs/--as-size.md
 create mode 100644 packages/support-flags/docs/--as-slider.md
 create mode 100644 packages/support-flags/docs/--as-span.md
 create mode 100644 packages/support-flags/docs/--as-text-group.md
 create mode 100644 packages/support-flags/docs/--as-toggle.md
 create mode 100644 packages/support-flags/docs/--as-wrap.md
 create mode 100644 packages/support-flags/docs/--break-color.md
 create mode 100644 packages/support-flags/docs/--break-component.md
 create mode 100644 packages/support-flags/docs/--camera-display.md
 create mode 100644 packages/support-flags/docs/--class.md
 create mode 100644 packages/support-flags/docs/--content-id.md
 create mode 100644 packages/support-flags/docs/--cursor.md
 create mode 100644 packages/support-flags/docs/--dynamic-container.md
 create mode 100644 packages/support-flags/docs/--dynamic-item.md
 create mode 100644 packages/support-flags/docs/--empty-content.md
 create mode 100644 packages/support-flags/docs/--exact-height.md
 create mode 100644 packages/support-flags/docs/--exact-width.md
 create mode 100644 packages/support-flags/docs/--export-as.md
 create mode 100644 packages/support-flags/docs/--export-gif.md
 create mode 100644 packages/support-flags/docs/--export-jpg.md
 create mode 100644 packages/support-flags/docs/--export-pdf.md
 create mode 100644 packages/support-flags/docs/--export-png.md
 create mode 100644 packages/support-flags/docs/--export-svg.md
 create mode 100644 packages/support-flags/docs/--export.md
 create mode 100644 packages/support-flags/docs/--fix-bottom.md
 create mode 100644 packages/support-flags/docs/--fix-height.md
 create mode 100644 packages/support-flags/docs/--fix-width.md
 create mode 100644 packages/support-flags/docs/--hash.md
 create mode 100644 packages/support-flags/docs/--height.md
 create mode 100644 packages/support-flags/docs/--href.md
 create mode 100644 packages/support-flags/docs/--id.md
 create mode 100644 packages/support-flags/docs/--ignore.md
 create mode 100644 packages/support-flags/docs/--is-input-caret.md
 create mode 100644 packages/support-flags/docs/--is-native-android-ui.md
 create mode 100644 packages/support-flags/docs/--is-native-ios-ui.md
 create mode 100644 packages/support-flags/docs/--max-height.md
 create mode 100644 packages/support-flags/docs/--max-width.md
 create mode 100644 packages/support-flags/docs/--media.md
 create mode 100644 packages/support-flags/docs/--min-height.md
 create mode 100644 packages/support-flags/docs/--min-width.md
 create mode 100644 packages/support-flags/docs/--module.md
 create mode 100644 packages/support-flags/docs/--motion-on-hover.md
 create mode 100644 packages/support-flags/docs/--motion.md
 create mode 100644 packages/support-flags/docs/--onclick.md
 create mode 100644 packages/support-flags/docs/--overflow.md
 create mode 100644 packages/support-flags/docs/--position-fixed.md
 create mode 100644 packages/support-flags/docs/--position-sticky.md
 create mode 100644 packages/support-flags/docs/--proc-ignore.md
 create mode 100644 packages/support-flags/docs/--proc-skip.md
 create mode 100644 packages/support-flags/docs/--responsive-id.md
 create mode 100644 packages/support-flags/docs/--root.md
 create mode 100644 packages/support-flags/docs/--scope.md
 create mode 100644 packages/support-flags/docs/--scroll.md
 create mode 100644 packages/support-flags/docs/--text-template.md
 create mode 100644 packages/support-flags/docs/--use-flag.md
 create mode 100644 packages/support-flags/docs/--video.md
 create mode 100644 packages/support-flags/docs/--webview-src.md
 create mode 100644 packages/support-flags/docs/--width.md
 create mode 100644 packages/support-flags/docs/--x-code-component.md
 create mode 100644 packages/support-flags/docs/--x-code-static.md
 create mode 100644 packages/support-flags/docs/--x-lottie-view.md
 create mode 100644 packages/support-flags/docs/README.md
 create mode 100644 packages/support-flags/docs/__readme_template__.md
 create mode 100644 packages/support-flags/docs/index.md
 create mode 100644 packages/support-flags/scripts/sanitize-readme.js

diff --git a/docs/flags/.gitignore b/docs/flags/.gitignore
new file mode 100644
index 00000000..59cc255a
--- /dev/null
+++ b/docs/flags/.gitignore
@@ -0,0 +1,4 @@
+# This .gitignore file will be included in copy ci execution.
+# Only add targets that shouuld not be included in final docs deployment.
+__**__.md
+README.md
\ No newline at end of file
diff --git a/packages/support-flags/----disable/README.md b/packages/support-flags/----disable/README.md
index 12bf2227..be9b42d5 100644
--- a/packages/support-flags/----disable/README.md
+++ b/packages/support-flags/----disable/README.md
@@ -1 +1,4 @@
-# `----<flag>` - Commenting a flag
+# `----disable` Flag
+
+- Visit the [design documentation](../docs/----disable.md)
+- View it on Grida [Docs](https://grida.co/docs/flags/----disable)
diff --git a/packages/support-flags/--action/README.md b/packages/support-flags/--action/README.md
index 0f16e4ef..7be97dae 100644
--- a/packages/support-flags/--action/README.md
+++ b/packages/support-flags/--action/README.md
@@ -1 +1,4 @@
-# `--action=<name>` - Action flag
+# `--action` Flag
+
+- Visit the [design documentation](../docs/--action.md)
+- View it on Grida [Docs](https://grida.co/docs/flags/--action)
diff --git a/packages/support-flags/--artwork/README.md b/packages/support-flags/--artwork/README.md
index 192273c1..a8f2a966 100644
--- a/packages/support-flags/--artwork/README.md
+++ b/packages/support-flags/--artwork/README.md
@@ -1,40 +1,4 @@
-## Artwork flag
+# `--artwork` Flag
 
-**Accepted keys**
-
-- `--artwork`
-
-## Syntax
-
-```ts
-`--artwork${"="typeof boolean}`
-```
-
-## Example
-
-```
---artwork
-
---artwork=true
---artwork=false
-
---artwork=yes
---artwork=no
-
-----artwork
-```
-
-## Behavior
-
-**Interpreter**
-
-When applied, this will force the node to be exported as an image.
-
-**Render**
-
-- HTML: rendered as an `<img>` element.
-- Flutter: rendered as an `Image` widget.
-
-## See Also
-
-- [`--export-as`](../--export-as)
+- Visit the [design documentation](../docs/--artwork.md)
+- View it on Grida [Docs](https://grida.co/docs/flags/--artwork)
diff --git a/packages/support-flags/--as-avatar/README.md b/packages/support-flags/--as-avatar/README.md
index 287be6e6..f6fe40df 100644
--- a/packages/support-flags/--as-avatar/README.md
+++ b/packages/support-flags/--as-avatar/README.md
@@ -1,6 +1,4 @@
-# `--as=avatar` - [Reflect UI](https://reflect-ui.com) Avatar Widget Indication Flag
+# `--as-avatar` Flag
 
-## Syntax
-
-- `--as-avatar`
-- `--as=avatar`
+- Visit the [design documentation](../docs/--as-avatar.md)
+- View it on Grida [Docs](https://grida.co/docs/flags/--as-avatar)
diff --git a/packages/support-flags/--as-br/README.md b/packages/support-flags/--as-br/README.md
index b6054b02..b4782298 100644
--- a/packages/support-flags/--as-br/README.md
+++ b/packages/support-flags/--as-br/README.md
@@ -1,17 +1,4 @@
----
-stage:
-  - proposal
-  - draft
----
+# `--as-br` Flag
 
-<!-- Insider's note. -->
-<!-- We haven't find the correct scenario that this flag is required. -->
-<!-- Leaving this feature as proposal -->
-
-# (Draft) `--as-br` As Break
-
-## Interprets the flagged element as break (`<br/>`).
-
-## When to use
-
-While designing a text layout, or a paragraph, we tend to use autolayout (a flex layout) to contain multiple text to be visually displayed as single text.
+- Visit the [design documentation](../docs/--as-br.md)
+- View it on Grida [Docs](https://grida.co/docs/flags/--as-br)
diff --git a/packages/support-flags/--as-button/README.md b/packages/support-flags/--as-button/README.md
index d24f91b1..8f558d00 100644
--- a/packages/support-flags/--as-button/README.md
+++ b/packages/support-flags/--as-button/README.md
@@ -1,6 +1,4 @@
-# `--as=button` - [Reflect UI](https://reflect-ui.com) Button Widget Indication Flag
+# `--as-button` Flag
 
-## Syntax
-
-- `--as-button`
-- `--as=button`
+- Visit the [design documentation](../docs/--as-button.md)
+- View it on Grida [Docs](https://grida.co/docs/flags/--as-button)
diff --git a/packages/support-flags/--as-char/README.md b/packages/support-flags/--as-char/README.md
index 659c2e40..7c4f54d9 100644
--- a/packages/support-flags/--as-char/README.md
+++ b/packages/support-flags/--as-char/README.md
@@ -1,18 +1,4 @@
-# As Character
+# `--as-char` Flag
 
-## See also
-
-- `--as-space`
-- `--as-text-group`
-
-## When to use
-
-Some characters can't be displayed in design tool with only using pure text.
-
-Special characters, custom emoji, custom image, etc.
-
-## Example
-
-```
---as-char="🤔"
-```
+- Visit the [design documentation](../docs/--as-char.md)
+- View it on Grida [Docs](https://grida.co/docs/flags/--as-char)
diff --git a/packages/support-flags/--as-checkbox/README.md b/packages/support-flags/--as-checkbox/README.md
index 4d0fe6ee..0fafed11 100644
--- a/packages/support-flags/--as-checkbox/README.md
+++ b/packages/support-flags/--as-checkbox/README.md
@@ -1,7 +1,4 @@
-# `--as=checkbox` - [Reflect UI](https://reflect-ui.com) Checkbox Widget Indication Flag
+# `--as-checkbox` Flag
 
-## Syntax
-
-- `--as-checkbox`
-- `--as-checkbox=true`
-- `--as=checkbox`
+- Visit the [design documentation](../docs/--as-checkbox.md)
+- View it on Grida [Docs](https://grida.co/docs/flags/--as-checkbox)
diff --git a/packages/support-flags/--as-divider/README.md b/packages/support-flags/--as-divider/README.md
index c64d2e62..fed13388 100644
--- a/packages/support-flags/--as-divider/README.md
+++ b/packages/support-flags/--as-divider/README.md
@@ -1,7 +1,4 @@
-# `--as=divider` - [Reflect UI](https://reflect-ui.com) Divider Widget Indication Flag
+# `--as-divider` Flag
 
-## Syntax
-
-- `--as-divider`
-- `--as-divider=true`
-- `--as=divider`
+- Visit the [design documentation](../docs/--as-divider.md)
+- View it on Grida [Docs](https://grida.co/docs/flags/--as-divider)
diff --git a/packages/support-flags/--as-h1/README.md b/packages/support-flags/--as-h1/README.md
index e5cd9812..b600c416 100644
--- a/packages/support-flags/--as-h1/README.md
+++ b/packages/support-flags/--as-h1/README.md
@@ -1,55 +1,4 @@
----
-stage:
-  - production
-  - staging
-  - experimental
----
+# `--as-h1` Flag
 
-# `--as-h1` As Heading1
-
-**Accepted keys**
-
-- `--as-h1`
-- `--as-heading1`
-- `--as-headline1`
-- `--h1`
-- `--heading1`
-- `--headline1`
-
-## Syntax
-
-```ts
-`--h1${"="typeof boolean}`
-```
-
-## Example
-
-```
---h1
-
---h1=true
---h1=false
-
---h1=yes
---h1=no
-
-----h1
-```
-
-## Behavior
-
-**Element**
-When applied, this will force the node to be rendered as a `<h1>` element.
-
-**Text style**
-We don't yet support text style matching with `--h1` flag.
-
-## See Also
-
-- [`--as-h2`](../--as-h2)
-- [`--as-h3`](../--as-h3)
-- [`--as-h4`](../--as-h4)
-- [`--as-h5`](../--as-h5)
-- [`--as-h6`](../--as-h6)
-- [`--as-p`](../--as-p)
-- [`--as-br`](../--as-br)
+- Visit the [design documentation](../docs/--as-h1.md)
+- View it on Grida [Docs](https://grida.co/docs/flags/--as-h1)
diff --git a/packages/support-flags/--as-h2/README.md b/packages/support-flags/--as-h2/README.md
index 9bd9cc32..7090ae49 100644
--- a/packages/support-flags/--as-h2/README.md
+++ b/packages/support-flags/--as-h2/README.md
@@ -1,55 +1,4 @@
----
-stage:
-  - production
-  - staging
-  - experimental
----
+# `--as-h2` Flag
 
-# `--as-h2` As Heading2
-
-**Accepted keys**
-
-- `--as-h2`
-- `--as-heading2`
-- `--as-headline2`
-- `--h2`
-- `--heading2`
-- `--headline2`
-
-## Syntax
-
-```ts
-`--h2${"="typeof boolean}`
-```
-
-## Example
-
-```
---h2
-
---h2=true
---h2=false
-
---h2=yes
---h2=no
-
-----h2
-```
-
-## Behavior
-
-**Element**
-When applied, this will force the node to be rendered as a `<h2>` element.
-
-**Text style**
-We don't yet support text style matching with `--h2` flag.
-
-## See Also
-
-- [`--as-h1`](../--as-h1)
-- [`--as-h3`](../--as-h3)
-- [`--as-h4`](../--as-h4)
-- [`--as-h5`](../--as-h5)
-- [`--as-h6`](../--as-h6)
-- [`--as-p`](../--as-p)
-- [`--as-br`](../--as-br)
+- Visit the [design documentation](../docs/--as-h2.md)
+- View it on Grida [Docs](https://grida.co/docs/flags/--as-h2)
diff --git a/packages/support-flags/--as-h3/README.md b/packages/support-flags/--as-h3/README.md
index 8adfd930..96666293 100644
--- a/packages/support-flags/--as-h3/README.md
+++ b/packages/support-flags/--as-h3/README.md
@@ -1,55 +1,4 @@
----
-stage:
-  - production
-  - staging
-  - experimental
----
+# `--as-h3` Flag
 
-# `--as-h3` As Heading3
-
-**Accepted keys**
-
-- `--as-h3`
-- `--as-heading3`
-- `--as-headline3`
-- `--h3`
-- `--heading3`
-- `--headline3`
-
-## Syntax
-
-```ts
-`--h3${"="typeof boolean}`
-```
-
-## Example
-
-```
---h3
-
---h3=true
---h3=false
-
---h3=yes
---h3=no
-
-----h3
-```
-
-## Behavior
-
-**Element**
-When applied, this will force the node to be rendered as a `<h3>` element.
-
-**Text style**
-We don't yet support text style matching with `--h3` flag.
-
-## See Also
-
-- [`--as-h1`](../--as-h1)
-- [`--as-h2`](../--as-h2)
-- [`--as-h4`](../--as-h4)
-- [`--as-h5`](../--as-h5)
-- [`--as-h6`](../--as-h6)
-- [`--as-p`](../--as-p)
-- [`--as-br`](../--as-br)
+- Visit the [design documentation](../docs/--as-h3.md)
+- View it on Grida [Docs](https://grida.co/docs/flags/--as-h3)
diff --git a/packages/support-flags/--as-h4/README.md b/packages/support-flags/--as-h4/README.md
index bbae2a70..08e5d4b1 100644
--- a/packages/support-flags/--as-h4/README.md
+++ b/packages/support-flags/--as-h4/README.md
@@ -1,55 +1,4 @@
----
-stage:
-  - production
-  - staging
-  - experimental
----
+# `--as-h4` Flag
 
-# `--as-h4` As Heading4
-
-**Accepted keys**
-
-- `--as-h4`
-- `--as-heading4`
-- `--as-headline4`
-- `--h4`
-- `--heading4`
-- `--headline4`
-
-## Syntax
-
-```ts
-`--h4${"="typeof boolean}`
-```
-
-## Example
-
-```
---h4
-
---h4=true
---h4=false
-
---h4=yes
---h4=no
-
-----h4
-```
-
-## Behavior
-
-**Element**
-When applied, this will force the node to be rendered as a `<h4>` element.
-
-**Text style**
-We don't yet support text style matching with `--h4` flag.
-
-## See Also
-
-- [`--as-h1`](../--as-h1)
-- [`--as-h2`](../--as-h2)
-- [`--as-h3`](../--as-h3)
-- [`--as-h5`](../--as-h5)
-- [`--as-h6`](../--as-h6)
-- [`--as-p`](../--as-p)
-- [`--as-br`](../--as-br)
+- Visit the [design documentation](../docs/--as-h4.md)
+- View it on Grida [Docs](https://grida.co/docs/flags/--as-h4)
diff --git a/packages/support-flags/--as-h5/README.md b/packages/support-flags/--as-h5/README.md
index 5503a80a..2b14575a 100644
--- a/packages/support-flags/--as-h5/README.md
+++ b/packages/support-flags/--as-h5/README.md
@@ -1,55 +1,4 @@
----
-stage:
-  - production
-  - staging
-  - experimental
----
+# `--as-h5` Flag
 
-# `--as-h5` As Heading5
-
-**Accepted keys**
-
-- `--as-h5`
-- `--as-heading5`
-- `--as-headline5`
-- `--h5`
-- `--heading5`
-- `--headline5`
-
-## Syntax
-
-```ts
-`--h5${"="typeof boolean}`
-```
-
-## Example
-
-```
---h5
-
---h5=true
---h5=false
-
---h5=yes
---h5=no
-
-----h5
-```
-
-## Behavior
-
-**Element**
-When applied, this will force the node to be rendered as a `<h5>` element.
-
-**Text style**
-We don't yet support text style matching with `--h5` flag.
-
-## See Also
-
-- [`--as-h1`](../--as-h1)
-- [`--as-h2`](../--as-h2)
-- [`--as-h3`](../--as-h3)
-- [`--as-h4`](../--as-h4)
-- [`--as-h6`](../--as-h6)
-- [`--as-p`](../--as-p)
-- [`--as-br`](../--as-br)
+- Visit the [design documentation](../docs/--as-h5.md)
+- View it on Grida [Docs](https://grida.co/docs/flags/--as-h5)
diff --git a/packages/support-flags/--as-h6/README.md b/packages/support-flags/--as-h6/README.md
index 3db14248..fbd202d9 100644
--- a/packages/support-flags/--as-h6/README.md
+++ b/packages/support-flags/--as-h6/README.md
@@ -1,55 +1,4 @@
----
-stage:
-  - production
-  - staging
-  - experimental
----
+# `--as-h6` Flag
 
-# `--as-h6` As Heading6
-
-**Accepted keys**
-
-- `--as-h6`
-- `--as-heading6`
-- `--as-headline6`
-- `--h6`
-- `--heading6`
-- `--headline6`
-
-## Syntax
-
-```ts
-`--h6${"="typeof boolean}`
-```
-
-## Example
-
-```
---h6
-
---h6=true
---h6=false
-
---h6=yes
---h6=no
-
-----h6
-```
-
-## Behavior
-
-**Element**
-When applied, this will force the node to be rendered as a `<h6>` element.
-
-**Text style**
-We don't yet support text style matching with `--h6` flag.
-
-## See Also
-
-- [`--as-h1`](../--as-h1)
-- [`--as-h2`](../--as-h2)
-- [`--as-h3`](../--as-h3)
-- [`--as-h4`](../--as-h4)
-- [`--as-h5`](../--as-h5)
-- [`--as-p`](../--as-p)
-- [`--as-br`](../--as-br)
+- Visit the [design documentation](../docs/--as-h6.md)
+- View it on Grida [Docs](https://grida.co/docs/flags/--as-h6)
diff --git a/packages/support-flags/--as-input/README.md b/packages/support-flags/--as-input/README.md
index c5118056..cab9549f 100644
--- a/packages/support-flags/--as-input/README.md
+++ b/packages/support-flags/--as-input/README.md
@@ -1,7 +1,4 @@
-# `--as=input` - [Reflect UI](https://reflect-ui.com) Input (TextField) Widget Indication Flag
+# `--as-input` Flag
 
-## Syntax
-
-- `--as-input`
-- `--as-input=true`
-- `--as=input`
+- Visit the [design documentation](../docs/--as-input.md)
+- View it on Grida [Docs](https://grida.co/docs/flags/--as-input)
diff --git a/packages/support-flags/--as-list/README.md b/packages/support-flags/--as-list/README.md
index 342a7322..a12b28eb 100644
--- a/packages/support-flags/--as-list/README.md
+++ b/packages/support-flags/--as-list/README.md
@@ -1,7 +1,4 @@
-# `--as=list` - [Reflect UI](https://reflect-ui.com) ListView Widget Indication Flag
+# `--as-list` Flag
 
-## Syntax
-
-- `--as-list`
-- `--as-list=true`
-- `--as=list`
+- Visit the [design documentation](../docs/--as-list.md)
+- View it on Grida [Docs](https://grida.co/docs/flags/--as-list)
diff --git a/packages/support-flags/--as-mdi/README.md b/packages/support-flags/--as-mdi/README.md
index 45b3d5b5..0f39b339 100644
--- a/packages/support-flags/--as-mdi/README.md
+++ b/packages/support-flags/--as-mdi/README.md
@@ -1,11 +1,4 @@
-# `--as=mdi` - [Reflect UI](https://reflect-ui.com) Material Design Icon Widget Indication Flag
+# `--as-mdi` Flag
 
-## Syntax
-
-- `--as-mdi`
-- `--as-mdi=true`
-- `--as=mdi`
-
-## Fallback
-
-- `--as-icon`
+- Visit the [design documentation](../docs/--as-mdi.md)
+- View it on Grida [Docs](https://grida.co/docs/flags/--as-mdi)
diff --git a/packages/support-flags/--as-modal/README.md b/packages/support-flags/--as-modal/README.md
index c9c441fd..d4ea8b7a 100644
--- a/packages/support-flags/--as-modal/README.md
+++ b/packages/support-flags/--as-modal/README.md
@@ -1,7 +1,4 @@
-# `--as=modal` - [Reflect UI](https://reflect-ui.com) Modal Widget Indication Flag
+# `--as-modal` Flag
 
-## Syntax
-
-- `--as-modal`
-- `--as-modal=true`
-- `--as=modal`
+- Visit the [design documentation](../docs/--as-modal.md)
+- View it on Grida [Docs](https://grida.co/docs/flags/--as-modal)
diff --git a/packages/support-flags/--as-nbsp/README.md b/packages/support-flags/--as-nbsp/README.md
index b0630ed3..be8770b4 100644
--- a/packages/support-flags/--as-nbsp/README.md
+++ b/packages/support-flags/--as-nbsp/README.md
@@ -1,36 +1,4 @@
-# `--as-nbsp` As Non-Breaking Space
+# `--as-nbsp` Flag
 
-**Accepted keys**
-
-- `--as-nbsp`
-- `--as-space`
-- `--nbsp`
-
-**`--as-nbsp` Extends `--as-char`**
-
-> `--as-nbsp` is equivalent to `--as-char=&nbsp;` or `--as-char=" "`
-
-## Syntax
-
-```ts
-`--nbsp${"="typeof number}`
-```
-
-## Example
-
-```
---nbsp       // 1 space, with `"&nbsp;"` on html
---as-nbsp    // 1 space, with `"&nbsp;"` on html
---as-space   // 1 space, with `" "` on html, if not available, e.g. on trailing, uses `"&nbsp;"`.
-
-
---nbsp=2     // 2 spaces
---nbsp=3     // 3 spaces
-
-
-----nbsp=2   // commented out
-```
-
-## See also
-
-- [`--as-char`](../--as-char)
+- Visit the [design documentation](../docs/--as-nbsp.md)
+- View it on Grida [Docs](https://grida.co/docs/flags/--as-nbsp)
diff --git a/packages/support-flags/--as-p/README.md b/packages/support-flags/--as-p/README.md
index c33c2aca..c23aed5b 100644
--- a/packages/support-flags/--as-p/README.md
+++ b/packages/support-flags/--as-p/README.md
@@ -1,48 +1,4 @@
-# `--as-p` As Paragraph (Text)
+# `--as-p` Flag
 
-> This flag is for web platform. Otherwise, it will be ignored, have no impact on the final output.
-
-**Accepted keys**
-
-- `--as-p`
-- `--as-paragraph`
-- `--paragraph`
-
-## Syntax
-
-```ts
-`--as-p${"="typeof boolean}`
-```
-
-## Example
-
-```
---paragraph
-
---paragraph=true
---paragraph=false
-
---paragraph=yes
---paragraph=no
-
-----paragraph
-```
-
-## Behavior
-
-**Element**
-When applied, this will force the node to be rendered as a `<p>` element.
-
-**Text style**
-We don't yet support text style matching with `--p` flag.
-
-## See Also
-
-- [`--as-h1`](../--as-h1)
-- [`--as-h2`](../--as-h2)
-- [`--as-h3`](../--as-h3)
-- [`--as-h4`](../--as-h4)
-- [`--as-h5`](../--as-h5)
-- [`--as-h6`](../--as-h6)
-- [`--as-p`](../--as-p)
-- [`--as-br`](../--as-br)
+- Visit the [design documentation](../docs/--as-p.md)
+- View it on Grida [Docs](https://grida.co/docs/flags/--as-p)
diff --git a/packages/support-flags/--as-resizable/README.md b/packages/support-flags/--as-resizable/README.md
index eb4f5b59..dd7838f6 100644
--- a/packages/support-flags/--as-resizable/README.md
+++ b/packages/support-flags/--as-resizable/README.md
@@ -1 +1,4 @@
-# Resizable widget indication
+# `--as-resizable` Flag
+
+- Visit the [design documentation](../docs/--as-resizable.md)
+- View it on Grida [Docs](https://grida.co/docs/flags/--as-resizable)
diff --git a/packages/support-flags/--as-size/README.md b/packages/support-flags/--as-size/README.md
index c203dcad..f21f796c 100644
--- a/packages/support-flags/--as-size/README.md
+++ b/packages/support-flags/--as-size/README.md
@@ -1,8 +1,4 @@
-# Mark as size
+# `--as-size` Flag
 
-## Will be
-
-```
-element: --as-size
-is: Sized() | Container() | Padding()
-```
+- Visit the [design documentation](../docs/--as-size.md)
+- View it on Grida [Docs](https://grida.co/docs/flags/--as-size)
diff --git a/packages/support-flags/--as-slider/README.md b/packages/support-flags/--as-slider/README.md
index 0a061dc0..beea934c 100644
--- a/packages/support-flags/--as-slider/README.md
+++ b/packages/support-flags/--as-slider/README.md
@@ -1,7 +1,4 @@
-# `--as=slider` - [Reflect UI](https://reflect-ui.com) Slider Widget Indication Flag
+# `--as-slider` Flag
 
-## Syntax
-
-- `--as-slider`
-- `--as-slider=true`
-- `--as=slider`
+- Visit the [design documentation](../docs/--as-slider.md)
+- View it on Grida [Docs](https://grida.co/docs/flags/--as-slider)
diff --git a/packages/support-flags/--as-span/README.md b/packages/support-flags/--as-span/README.md
index 85325de1..c58b25a5 100644
--- a/packages/support-flags/--as-span/README.md
+++ b/packages/support-flags/--as-span/README.md
@@ -1,59 +1,4 @@
-# `--as-span` As TextSpan (Text)
+# `--as-span` Flag
 
-> This flag is for web platform. Otherwise, it will be ignored, have no impact on the final output.
-
-**Accepted keys**
-
-- `--as-span`
-- `--as-text-span`
-- `--as-textspan`
-- `--text-span`
-- `--textspan`
-
-## Syntax
-
-```ts
-`--as-span${"="typeof boolean}`
-```
-
-## Example
-
-```
---as-span
-
---as-span=true
---as-span=false
-
---as-span=yes
---as-span=no
-
-----as-span
-```
-
-## Behavior
-
-**Element**
-When applied, this will force the node to be rendered as a `<span>` element.
-
-**Text style**
-We don't yet support text style matching with `--as-span` flag.
-
-## Anatomy
-
-```ts
-export interface AsSpanFlag {
-  flag: "as-span" | "as-text-span" | "as-textspan" | "text-span" | "textspan";
-
-  value?: boolean;
-}
-```
-
-## See Also
-
-- [`--as-h1`](../--as-h1)
-- [`--as-h2`](../--as-h2)
-- [`--as-h3`](../--as-h3)
-- [`--as-h4`](../--as-h4)
-- [`--as-h5`](../--as-h5)
-- [`--as-h6`](../--as-h6)
-- [`--as-p`](../--as-p)
+- Visit the [design documentation](../docs/--as-span.md)
+- View it on Grida [Docs](https://grida.co/docs/flags/--as-span)
diff --git a/packages/support-flags/--as-text-group/README.md b/packages/support-flags/--as-text-group/README.md
index 69332d0e..9c03a291 100644
--- a/packages/support-flags/--as-text-group/README.md
+++ b/packages/support-flags/--as-text-group/README.md
@@ -1,3 +1,4 @@
-## (Draft) Text group
+# `--as-text-group` Flag
 
-While creating a multilined, complex text, for example, inserting a custom emoji, or a custom image, we need to use a text group. This is usually done by using a autolayout or col-row oriented multiple autolayouts.
+- Visit the [design documentation](../docs/--as-text-group.md)
+- View it on Grida [Docs](https://grida.co/docs/flags/--as-text-group)
diff --git a/packages/support-flags/--as-toggle/README.md b/packages/support-flags/--as-toggle/README.md
index 2440cb79..fccd3a7a 100644
--- a/packages/support-flags/--as-toggle/README.md
+++ b/packages/support-flags/--as-toggle/README.md
@@ -1,7 +1,4 @@
-# `--as=toggle` - [Reflect UI](https://reflect-ui.com) Toggle Widget Indication Flag
+# `--as-toggle` Flag
 
-## Syntax
-
-- `--as-toggle`
-- `--as-toggle=true`
-- `--as=toggle`
+- Visit the [design documentation](../docs/--as-toggle.md)
+- View it on Grida [Docs](https://grida.co/docs/flags/--as-toggle)
diff --git a/packages/support-flags/--as-wrap/README.md b/packages/support-flags/--as-wrap/README.md
index d6971554..c8394dd7 100644
--- a/packages/support-flags/--as-wrap/README.md
+++ b/packages/support-flags/--as-wrap/README.md
@@ -1,15 +1,4 @@
-# `--as=wrap` - flexbox / Wrap / [Reflect UI](https://reflect-ui.com) Wrap Widget Indication Flag
+# `--as-wrap` Flag
 
-(describing based on figma) Since no major design tool supports wrapping behaviour of the layout, we can use --as-wrap flag to indicate nested autolayout (e.g. `row([col([row, row, row]), col([row, row, row])])`) as a `wrap(item, item, item, item, item, item)`
-
-## Syntax
-
-- `--as-wrap`
-- `--as-wrap=true`
-- `--as=wrap`
-
-## Can be
-
-- flexbox on css
-- Wrap on flutter
-- Wrap with reflect-ui
+- Visit the [design documentation](../docs/--as-wrap.md)
+- View it on Grida [Docs](https://grida.co/docs/flags/--as-wrap)
diff --git a/packages/support-flags/--break-color/README.md b/packages/support-flags/--break-color/README.md
index 9738cb4c..a17abea5 100644
--- a/packages/support-flags/--break-color/README.md
+++ b/packages/support-flags/--break-color/README.md
@@ -1,8 +1,4 @@
-# `--break-color` - Break Color (A.k.a Raw Color)
+# `--break-color` Flag
 
-Breaks the color style constraints.
-
-```
-input: colorstyle=primary-light-blue
-output: rgb(173, 216, 230)
-```
+- Visit the [design documentation](../docs/--break-color.md)
+- View it on Grida [Docs](https://grida.co/docs/flags/--break-color)
diff --git a/packages/support-flags/--break-component/README.md b/packages/support-flags/--break-component/README.md
index 5f79d826..4a4001a3 100644
--- a/packages/support-flags/--break-component/README.md
+++ b/packages/support-flags/--break-component/README.md
@@ -1,8 +1,4 @@
-# `--break-component` - Break Component (A.k.a Raw View)
+# `--break-component` Flag
 
-Breaks the component constraints, interpret it as a raw copy of the instance view
-
-```
-origianlly: <AppHeaderBar>
-wouldbe: <div id="app-header-bar-1">...</div>
-```
+- Visit the [design documentation](../docs/--break-component.md)
+- View it on Grida [Docs](https://grida.co/docs/flags/--break-component)
diff --git a/packages/support-flags/--camera-display/README.md b/packages/support-flags/--camera-display/README.md
index 6d0a4647..0cf19b3e 100644
--- a/packages/support-flags/--camera-display/README.md
+++ b/packages/support-flags/--camera-display/README.md
@@ -1,10 +1,4 @@
-# Camera display
+# `--camera-display` Flag
 
-## Platforms
-
-- web
-  - uses: webcam
-  - @reflect-ui/universal-camera-view
-- flutter
-  - uses: device cam[0]
-  - flutter-universal-camera-view by reflect-ui
+- Visit the [design documentation](../docs/--camera-display.md)
+- View it on Grida [Docs](https://grida.co/docs/flags/--camera-display)
diff --git a/packages/support-flags/--class/README.md b/packages/support-flags/--class/README.md
index 97dbedaa..ff53001c 100644
--- a/packages/support-flags/--class/README.md
+++ b/packages/support-flags/--class/README.md
@@ -1,7 +1,4 @@
-# Custom css class indication (extends)
+# `--class` Flag
 
-```
-origainally: class="container"
-input: class=custom-big-box
-outpug: class="container custom-big-box"
-```
+- Visit the [design documentation](../docs/--class.md)
+- View it on Grida [Docs](https://grida.co/docs/flags/--class)
diff --git a/packages/support-flags/--content-id/README.md b/packages/support-flags/--content-id/README.md
index fc76c37f..6d26a15e 100644
--- a/packages/support-flags/--content-id/README.md
+++ b/packages/support-flags/--content-id/README.md
@@ -1,3 +1,4 @@
-## `--content-id` Flag (Draft)
+# `--content-id` Flag
 
-> Familly of id specifiers.
+- Visit the [design documentation](../docs/--content-id.md)
+- View it on Grida [Docs](https://grida.co/docs/flags/--content-id)
diff --git a/packages/support-flags/--cursor/README.md b/packages/support-flags/--cursor/README.md
index 2d316dd1..cead49ce 100644
--- a/packages/support-flags/--cursor/README.md
+++ b/packages/support-flags/--cursor/README.md
@@ -1,12 +1,4 @@
-# Mouse cursor indication
+# `--cursor` Flag
 
-- `--cursor=pointer`
-- `--cursor=wait`
-- `--cursor=text`
-- `--cursor=ew-resize`
-- `--cursor=url(https://example.com/cursor.png)`
-- and any other standard css cursor value from [CSS#Cursor](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor)
-
-## Fallbacks to
-
-- `--cursor=auto`
+- Visit the [design documentation](../docs/--cursor.md)
+- View it on Grida [Docs](https://grida.co/docs/flags/--cursor)
diff --git a/packages/support-flags/--dynamic-container/README.md b/packages/support-flags/--dynamic-container/README.md
index e69de29b..b576fa71 100644
--- a/packages/support-flags/--dynamic-container/README.md
+++ b/packages/support-flags/--dynamic-container/README.md
@@ -0,0 +1,4 @@
+# `--dynamic-container` Flag
+
+- Visit the [design documentation](../docs/--dynamic-container.md)
+- View it on Grida [Docs](https://grida.co/docs/flags/--dynamic-container)
diff --git a/packages/support-flags/--dynamic-item/README.md b/packages/support-flags/--dynamic-item/README.md
index e69de29b..85dd1e88 100644
--- a/packages/support-flags/--dynamic-item/README.md
+++ b/packages/support-flags/--dynamic-item/README.md
@@ -0,0 +1,4 @@
+# `--dynamic-item` Flag
+
+- Visit the [design documentation](../docs/--dynamic-item.md)
+- View it on Grida [Docs](https://grida.co/docs/flags/--dynamic-item)
diff --git a/packages/support-flags/--empty-content/README.md b/packages/support-flags/--empty-content/README.md
index 73635c2e..dd969d57 100644
--- a/packages/support-flags/--empty-content/README.md
+++ b/packages/support-flags/--empty-content/README.md
@@ -1,8 +1,4 @@
-# Empty (command) A Content
+# `--empty-content` Flag
 
-> This does not indicate that current view has a empty content, but indicates that it **should** have a empty content.
-
-## See also
-
-- [`--dynamic-item`](../--dynamic-item/README.md)
-- [`--dynamic-content`](../--dynamic-container/README.md)
+- Visit the [design documentation](../docs/--empty-content.md)
+- View it on Grida [Docs](https://grida.co/docs/flags/--empty-content)
diff --git a/packages/support-flags/--export-as/README.md b/packages/support-flags/--export-as/README.md
index e892b75d..577c615a 100644
--- a/packages/support-flags/--export-as/README.md
+++ b/packages/support-flags/--export-as/README.md
@@ -1,6 +1,4 @@
-# Export As
+# `--export-as` Flag
 
-**Accepted keys**
-
-- `--export-as`
-- `--export`
+- Visit the [design documentation](../docs/--export-as.md)
+- View it on Grida [Docs](https://grida.co/docs/flags/--export-as)
diff --git a/packages/support-flags/--export-gif/README.md b/packages/support-flags/--export-gif/README.md
index 04ab396c..af15fec8 100644
--- a/packages/support-flags/--export-gif/README.md
+++ b/packages/support-flags/--export-gif/README.md
@@ -1,5 +1,4 @@
-# Export as gif
+# `--export-gif` Flag
 
-## For non-gif-origin-content
-
-We'll create a 10 frame dummy gif based on the origin snapshot png, with a simple scale + shake animation
+- Visit the [design documentation](../docs/--export-gif.md)
+- View it on Grida [Docs](https://grida.co/docs/flags/--export-gif)
diff --git a/packages/support-flags/--export-jpg/README.md b/packages/support-flags/--export-jpg/README.md
index e69de29b..dc700246 100644
--- a/packages/support-flags/--export-jpg/README.md
+++ b/packages/support-flags/--export-jpg/README.md
@@ -0,0 +1,4 @@
+# `--export-jpg` Flag
+
+- Visit the [design documentation](../docs/--export-jpg.md)
+- View it on Grida [Docs](https://grida.co/docs/flags/--export-jpg)
diff --git a/packages/support-flags/--export-pdf/README.md b/packages/support-flags/--export-pdf/README.md
index e69de29b..82708a80 100644
--- a/packages/support-flags/--export-pdf/README.md
+++ b/packages/support-flags/--export-pdf/README.md
@@ -0,0 +1,4 @@
+# `--export-pdf` Flag
+
+- Visit the [design documentation](../docs/--export-pdf.md)
+- View it on Grida [Docs](https://grida.co/docs/flags/--export-pdf)
diff --git a/packages/support-flags/--export-png/README.md b/packages/support-flags/--export-png/README.md
index e69de29b..234336a5 100644
--- a/packages/support-flags/--export-png/README.md
+++ b/packages/support-flags/--export-png/README.md
@@ -0,0 +1,4 @@
+# `--export-png` Flag
+
+- Visit the [design documentation](../docs/--export-png.md)
+- View it on Grida [Docs](https://grida.co/docs/flags/--export-png)
diff --git a/packages/support-flags/--export-svg/README.md b/packages/support-flags/--export-svg/README.md
index e69de29b..f90de1a4 100644
--- a/packages/support-flags/--export-svg/README.md
+++ b/packages/support-flags/--export-svg/README.md
@@ -0,0 +1,4 @@
+# `--export-svg` Flag
+
+- Visit the [design documentation](../docs/--export-svg.md)
+- View it on Grida [Docs](https://grida.co/docs/flags/--export-svg)
diff --git a/packages/support-flags/--fix-bottom/README.md b/packages/support-flags/--fix-bottom/README.md
index 216594a6..2d160f49 100644
--- a/packages/support-flags/--fix-bottom/README.md
+++ b/packages/support-flags/--fix-bottom/README.md
@@ -1,7 +1,4 @@
-# `--fix-bottom` Flag (Draft)
+# `--fix-bottom` Flag
 
-When applied, this will force dedicated layer's bottom to be ignore responsive bottom, use current bottom as fixed bottom instead.
-
-> ⚠️ This is different from `--position-fixed`. In general, this flag is not used for designing a footer.
-
-## See also
+- Visit the [design documentation](../docs/--fix-bottom.md)
+- View it on Grida [Docs](https://grida.co/docs/flags/--fix-bottom)
diff --git a/packages/support-flags/--fix-height/README.md b/packages/support-flags/--fix-height/README.md
index e6e13e7a..fa7d4f6c 100644
--- a/packages/support-flags/--fix-height/README.md
+++ b/packages/support-flags/--fix-height/README.md
@@ -1,24 +1,4 @@
-# `--fix-height` Flag (Draft)
+# `--fix-height` Flag
 
-When applied, this will force dedicated layer's `height` to be ignore responsive `height`, use current `height` as fixed `height` instead.
-
-## Syntax
-
-```ts
-`--fix-height${"="typeof boolean}`
-```
-
-## Example
-
-```
---fix-height
-
---fix-height=true
---fix-height=false
-
---fix-height=True
---fix-height=False
-
---fix-height=yes
---fix-height=no
-```
+- Visit the [design documentation](../docs/--fix-height.md)
+- View it on Grida [Docs](https://grida.co/docs/flags/--fix-height)
diff --git a/packages/support-flags/--fix-width/README.md b/packages/support-flags/--fix-width/README.md
index 5e7b57f9..e14b0858 100644
--- a/packages/support-flags/--fix-width/README.md
+++ b/packages/support-flags/--fix-width/README.md
@@ -1,28 +1,4 @@
-# `--fix-width` Flag (Draft)
+# `--fix-width` Flag
 
-When applied, this will force dedicated layer's `width` to be ignore responsive width, use current width as fixed width instead.
-
-**Accepted keys**
-
-- `--fix-width`
-
-## Syntax
-
-```ts
-`--fix-width${"="typeof boolean}`
-```
-
-## Example
-
-```
---fix-width
-
---fix-width=true
---fix-width=false
-
---fix-width=True
---fix-width=False
-
---fix-width=yes
---fix-width=no
-```
+- Visit the [design documentation](../docs/--fix-width.md)
+- View it on Grida [Docs](https://grida.co/docs/flags/--fix-width)
diff --git a/packages/support-flags/--hash/README.md b/packages/support-flags/--hash/README.md
index 6a6a5d74..25638a40 100644
--- a/packages/support-flags/--hash/README.md
+++ b/packages/support-flags/--hash/README.md
@@ -1,25 +1,4 @@
-# Hash
+# `--hash` Flag
 
-> Hash is a unique id indicator just like `--id`, but for a asset such as vector & images
-
-## Allowed on
-
-- layer with single image fill (a image)
-- a vector layer
-
-## Use with `--main`
-
-```
-vector layer 1 --hash=my-brand-logo
-vector layer 2 --hash=my-brand-logo --main
-```
-
-Now vector 1 & 2 will use the same svg data, based on vector 2's svg data (since it's marked with `--main`).
-
-- do - set one layer as main
-- don't - set multiple layer with same hash with main (will show warning)
-- don't - no main layer specified - will use the first hit item.
-
-## See also
-
-- [`--id`](../--id/README.md)
+- Visit the [design documentation](../docs/--hash.md)
+- View it on Grida [Docs](https://grida.co/docs/flags/--hash)
diff --git a/packages/support-flags/--height/README.md b/packages/support-flags/--height/README.md
index 275732a6..4be30e86 100644
--- a/packages/support-flags/--height/README.md
+++ b/packages/support-flags/--height/README.md
@@ -1,117 +1,4 @@
-# `--height` for explicit height
+# `--height` Flag
 
-**Accepted keys**
-
-- `--height`
-- `--h`
-
-## Syntax
-
-```ts
-`--height=${typeof length}`;
-```
-
-## Example
-
-```
---height=100
---h=100
-
---height=100px
-
---height=100vh
-```
-
-## Behavior
-
-**Element**
-There is no impact on element itself, but it can break relative layouts.
-
-**Style**
-When applied, this will force the node to be rendered with a `height` style.
-
-## (Proposal) (Draft) Advanced use
-
-> This feature is a proposal, won't work on production use.
-
-height and height support specifying min, max, and initial values.
-
-This is how it looks like:
-
-`--height=(initial)` or `--height=(min)-(max)-(initial)`
-
-```
---height=100px                // initial only
---height=100px-1080px-50vh    // min, max, initial
---height=100px-1080px         // min, max
---height=?-1080px             // min (none), max
---height=100px-?              // min , max (none)
---height=100px-?-50vh         // min , max (none), initial
-```
-
-you can skip the declaration with `?` keyword. this is a special keyword, interpreted as `undefined`
-
-"`--height=100px-?-50vh`" this will make css for example, as below.
-
-```css
-.foo {
-  min-height: 100px;
-  height: 50vh;
-}
-```
-
-"`--height=100px-1080px`" this indicates only min and max, yet, still the height will be specified based on current height of the origin design.
-
-```css
-.foo {
-  min-height: 100px;
-  max-height: 1080px;
-  height: 400px; /* this is from the design */
-}
-```
-
-### Ignoring one of the property
-
-**Using explicit `--ignore` flag**
-to ignore the height, you can use new flag `--ignore` set to height. like so - `--ignore=height`
-
-```css
-.foo {
-  min-height: 100px;
-  max-height: 1080px;
-  /* height: 400px; this is ignored by --ignore flag */
-}
-```
-
-**Using `?` keyword**
-Otherwise, you can simply use silincer keyword `?` to ignore the height, like so - `--height=100px-1080px-?`
-
-This will also generate style like below.
-
-```css
-.foo {
-  min-height: 100px;
-  max-height: 1080px;
-  /* height: 400px; this is ignored by "?" keyword */
-}
-```
-
-### Referencing current value with `.`
-
-Setting max-height to current height (based on design) with - `--height=100px-.-.`
-
-This will generate style like below.
-
-```css
-.foo {
-  min-height: 100px;
-  max-height: 400px; /* the current height from design */
-  height: 400px; /* the current height from design */
-}
-```
-
-## See Also
-
-- [`--max-height`](../--max-height)
-- [`--min-height`](../--min-height)
-- [`--width`](../--width)
+- Visit the [design documentation](../docs/--height.md)
+- View it on Grida [Docs](https://grida.co/docs/flags/--height)
diff --git a/packages/support-flags/--href/README.md b/packages/support-flags/--href/README.md
index 43cc2e54..edb15dfd 100644
--- a/packages/support-flags/--href/README.md
+++ b/packages/support-flags/--href/README.md
@@ -1,10 +1,4 @@
-# Link (Href) data provider
+# `--href` Flag
 
-_Examples_
-
-- `--link=https://grida.co`
-- `--link=/signup`
-
-## Disclaimer
-
-We choosed name `link` instead of `href` since it is more intuitive across non web developers. Also NextJS has a component named `<Link/>` which suggested us the idea.
+- Visit the [design documentation](../docs/--href.md)
+- View it on Grida [Docs](https://grida.co/docs/flags/--href)
diff --git a/packages/support-flags/--id/README.md b/packages/support-flags/--id/README.md
index 35063f3a..48f0e2c7 100644
--- a/packages/support-flags/--id/README.md
+++ b/packages/support-flags/--id/README.md
@@ -1,14 +1,4 @@
-# A Semantic ID Flag
+# `--id` Flag
 
-## When to use and what can it do?
-
-by specifing the id flag, you can take advantage in below scenarios.
-
-- Same vector, two different component, one for hover, one for default, only svg color is different. - in this case, you can set the id for both layer as same, so that the component code generation will not include the duplicated svg data / placeholder code.
-- id="value" on generated html output.
-
-<!-- TODO: provide more realworld usecase -->
-
-## See also
-
-- [`--hash`](../--hash/README.md)
+- Visit the [design documentation](../docs/--id.md)
+- View it on Grida [Docs](https://grida.co/docs/flags/--id)
diff --git a/packages/support-flags/--ignore/README.md b/packages/support-flags/--ignore/README.md
index 9c38060a..1b299150 100644
--- a/packages/support-flags/--ignore/README.md
+++ b/packages/support-flags/--ignore/README.md
@@ -1,11 +1,4 @@
-# Ignore the target property
+# `--ignore` Flag
 
-As a design choice, for example, a designer can add a boxshadow & radius to the frame of a website design frame. In this case, human developers can easily know that the boxshadow and the raius is a non relavent value and must be ignored. the `--ignore=<property>` flag can be used useful for this case.
-
----
-
-e.g.
-
-- `--ignore=*` - same as [`//@ignore`](../@ignore/README.md)
-- `--ignore=effects`
-- `--ignore=border-radius`
+- Visit the [design documentation](../docs/--ignore.md)
+- View it on Grida [Docs](https://grida.co/docs/flags/--ignore)
diff --git a/packages/support-flags/--is-input-caret/README.md b/packages/support-flags/--is-input-caret/README.md
index 770366d1..5088abc9 100644
--- a/packages/support-flags/--is-input-caret/README.md
+++ b/packages/support-flags/--is-input-caret/README.md
@@ -1,7 +1,4 @@
-# Input caret indication
+# `--is-input-caret` Flag
 
-We often tend to include interactive snapshot of the state, for example, a caret of text field on focused state. Designers often use vertical line, vertical slim rectangle or a text `"|"` to represent a input caret.
-
-Well of course, this should be ignored on the code.
-
-You can simply provide `--is-input-caret` flag on the caret design layer, so that the text field design can safely be interpreted and converted to a text field component code.
+- Visit the [design documentation](../docs/--is-input-caret.md)
+- View it on Grida [Docs](https://grida.co/docs/flags/--is-input-caret)
diff --git a/packages/support-flags/--is-native-android-ui/README.md b/packages/support-flags/--is-native-android-ui/README.md
index 87940e45..c9970824 100644
--- a/packages/support-flags/--is-native-android-ui/README.md
+++ b/packages/support-flags/--is-native-android-ui/README.md
@@ -1,3 +1,4 @@
-# A Android UI Mocking layers
+# `--is-native-android-ui` Flag
 
-e.g. A Notification banner, time & battery UI.
+- Visit the [design documentation](../docs/--is-native-android-ui.md)
+- View it on Grida [Docs](https://grida.co/docs/flags/--is-native-android-ui)
diff --git a/packages/support-flags/--is-native-ios-ui/README.md b/packages/support-flags/--is-native-ios-ui/README.md
index bf1f8430..30f19420 100644
--- a/packages/support-flags/--is-native-ios-ui/README.md
+++ b/packages/support-flags/--is-native-ios-ui/README.md
@@ -1,3 +1,4 @@
-# A iOS UI Mocking layers
+# `--is-native-ios-ui` Flag
 
-e.g. A Notification banner, time & battery UI.
+- Visit the [design documentation](../docs/--is-native-ios-ui.md)
+- View it on Grida [Docs](https://grida.co/docs/flags/--is-native-ios-ui)
diff --git a/packages/support-flags/--max-height/README.md b/packages/support-flags/--max-height/README.md
index c5a2f735..6456367a 100644
--- a/packages/support-flags/--max-height/README.md
+++ b/packages/support-flags/--max-height/README.md
@@ -1,36 +1,4 @@
-# Max height
+# `--max-height` Flag
 
-**Accepted keys**
-
-- `--max-height`
-- `--maxheight`
-
-## Syntax
-
-```ts
-`--max-height=${typeof length}`;
-```
-
-## Example
-
-```
---max-height=100
-
---max-height=100px
-
---max-height=100vh
-```
-
-## Behavior
-
-**Element**
-There is no impact on element itself, but it can break relative layouts.
-
-**Style**
-When applied, this will force the node to be rendered with a `max-height` style.
-
-## See Also
-
-- [`--max-width`](../--max-width)
-- [`--min-height`](../--max-height)
-- [`--height`](../--height)
+- Visit the [design documentation](../docs/--max-height.md)
+- View it on Grida [Docs](https://grida.co/docs/flags/--max-height)
diff --git a/packages/support-flags/--max-width/README.md b/packages/support-flags/--max-width/README.md
index 6dd58b83..91eb5713 100644
--- a/packages/support-flags/--max-width/README.md
+++ b/packages/support-flags/--max-width/README.md
@@ -1,36 +1,4 @@
-# Max width
+# `--max-width` Flag
 
-**Accepted keys**
-
-- `--max-width`
-- `--maxwidth`
-
-## Syntax
-
-```ts
-`--max-width=${typeof length}`;
-```
-
-## Example
-
-```
---max-width=100
-
---max-width=100px
-
---max-width=400vw
-```
-
-## Behavior
-
-**Element**
-There is no impact on element itself, but it can break relative layouts.
-
-**Style**
-When applied, this will force the node to be rendered with a max-width style.
-
-## See Also
-
-- [`--max-height`](../--max-height)
-- [`--min-width`](../--max-width)
-- [`--width`](../--max-width)
+- Visit the [design documentation](../docs/--max-width.md)
+- View it on Grida [Docs](https://grida.co/docs/flags/--max-width)
diff --git a/packages/support-flags/--media/README.md b/packages/support-flags/--media/README.md
index e69de29b..c6a7ecbc 100644
--- a/packages/support-flags/--media/README.md
+++ b/packages/support-flags/--media/README.md
@@ -0,0 +1,4 @@
+# `--media` Flag
+
+- Visit the [design documentation](../docs/--media.md)
+- View it on Grida [Docs](https://grida.co/docs/flags/--media)
diff --git a/packages/support-flags/--min-height/README.md b/packages/support-flags/--min-height/README.md
index 059d7771..b7e14f1d 100644
--- a/packages/support-flags/--min-height/README.md
+++ b/packages/support-flags/--min-height/README.md
@@ -1,36 +1,4 @@
-# Min height
+# `--min-height` Flag
 
-**Accepted keys**
-
-- `--min-height`
-- `--minheight`
-
-## Syntax
-
-```ts
-`--min-height=${typeof length}`;
-```
-
-## Example
-
-```
---min-height=100
-
---min-height=100px
-
---min-height=100vh
-```
-
-## Behavior
-
-**Element**
-There is no impact on element itself, but it can break relative layouts.
-
-**Style**
-When applied, this will force the node to be rendered with a `min-height` style.
-
-## See Also
-
-- [`--max-height`](../--max-height)
-- [`--min-width`](../--max-width)
-- [`--height`](../--height)
+- Visit the [design documentation](../docs/--min-height.md)
+- View it on Grida [Docs](https://grida.co/docs/flags/--min-height)
diff --git a/packages/support-flags/--min-width/README.md b/packages/support-flags/--min-width/README.md
index 28df8815..97d008c5 100644
--- a/packages/support-flags/--min-width/README.md
+++ b/packages/support-flags/--min-width/README.md
@@ -1,36 +1,4 @@
-# Min width
+# `--min-width` Flag
 
-**Accepted keys**
-
-- `--min-width`
-- `--minwidth`
-
-## Syntax
-
-```ts
-`--min-width=${typeof length}`;
-```
-
-## Example
-
-```
---min-width=100
-
---min-width=100px
-
---min-width=100vw
-```
-
-## Behavior
-
-**Element**
-There is no impact on element itself, but it can break relative layouts.
-
-**Style**
-When applied, this will force the node to be rendered with a `min-width` style.
-
-## See Also
-
-- [`--max-width`](../--max-width)
-- [`--min-height`](../--min-height)
-- [`--width`](../--width)
+- Visit the [design documentation](../docs/--min-width.md)
+- View it on Grida [Docs](https://grida.co/docs/flags/--min-width)
diff --git a/packages/support-flags/--module/README.md b/packages/support-flags/--module/README.md
index 6c457a2b..b780d00e 100644
--- a/packages/support-flags/--module/README.md
+++ b/packages/support-flags/--module/README.md
@@ -1,3 +1,4 @@
-# Module flag
+# `--module` Flag
 
-When specific layer or a group of layer (container of multiple layers) is defined as a module, the code output will split the part as a module (file splitting).
+- Visit the [design documentation](../docs/--module.md)
+- View it on Grida [Docs](https://grida.co/docs/flags/--module)
diff --git a/packages/support-flags/--motion-on-hover/README.md b/packages/support-flags/--motion-on-hover/README.md
index a78ae55f..d5fd69ef 100644
--- a/packages/support-flags/--motion-on-hover/README.md
+++ b/packages/support-flags/--motion-on-hover/README.md
@@ -1,9 +1,4 @@
-## `--motion-on-hover` Flag (Draft)
+# `--motion-on-hover` Flag
 
-> Familly of `--motion-on-*` flags.
-
-example
-
-```txt
---motion-on-hover=reflect-bounce-17-fancy
-```
+- Visit the [design documentation](../docs/--motion-on-hover.md)
+- View it on Grida [Docs](https://grida.co/docs/flags/--motion-on-hover)
diff --git a/packages/support-flags/--motion/README.md b/packages/support-flags/--motion/README.md
index f2a2cf1f..bd53584a 100644
--- a/packages/support-flags/--motion/README.md
+++ b/packages/support-flags/--motion/README.md
@@ -1,9 +1,4 @@
-## `--motion` Flag (Draft)
+# `--motion` Flag
 
-> Family of `--motion-*` flags.
-
-Example
-
-```txt
---motion=auto
-```
+- Visit the [design documentation](../docs/--motion.md)
+- View it on Grida [Docs](https://grida.co/docs/flags/--motion)
diff --git a/packages/support-flags/--onclick/README.md b/packages/support-flags/--onclick/README.md
index a04eb2c4..9b80770c 100644
--- a/packages/support-flags/--onclick/README.md
+++ b/packages/support-flags/--onclick/README.md
@@ -1,7 +1,4 @@
-# OnClick
+# `--onclick` Flag
 
-## onclick alias (Also allowed)
-
-- ontap
-- ontouch
-- onclick
+- Visit the [design documentation](../docs/--onclick.md)
+- View it on Grida [Docs](https://grida.co/docs/flags/--onclick)
diff --git a/packages/support-flags/--overflow/README.md b/packages/support-flags/--overflow/README.md
index c4d2fed5..6a08af5a 100644
--- a/packages/support-flags/--overflow/README.md
+++ b/packages/support-flags/--overflow/README.md
@@ -1,3 +1,4 @@
-## See also
+# `--overflow` Flag
 
-[`--scroll`](../--scroll/README.md)
+- Visit the [design documentation](../docs/--overflow.md)
+- View it on Grida [Docs](https://grida.co/docs/flags/--overflow)
diff --git a/packages/support-flags/--position-fixed/README.md b/packages/support-flags/--position-fixed/README.md
index db2274fc..b298aea0 100644
--- a/packages/support-flags/--position-fixed/README.md
+++ b/packages/support-flags/--position-fixed/README.md
@@ -1,3 +1,4 @@
-# Position as Fixed.
+# `--position-fixed` Flag
 
-describing based on figma, figma position is always absolute. there is not way to represent a fixed position. (we can, but only via fix position on scrolling)
+- Visit the [design documentation](../docs/--position-fixed.md)
+- View it on Grida [Docs](https://grida.co/docs/flags/--position-fixed)
diff --git a/packages/support-flags/--position-sticky/README.md b/packages/support-flags/--position-sticky/README.md
index 79ed0a42..9ddc9331 100644
--- a/packages/support-flags/--position-sticky/README.md
+++ b/packages/support-flags/--position-sticky/README.md
@@ -1 +1,4 @@
-# (WIP) Position as Sticky.
+# `--position-sticky` Flag
+
+- Visit the [design documentation](../docs/--position-sticky.md)
+- View it on Grida [Docs](https://grida.co/docs/flags/--position-sticky)
diff --git a/packages/support-flags/--proc-ignore/README.md b/packages/support-flags/--proc-ignore/README.md
index fa968864..0a70ecd9 100644
--- a/packages/support-flags/--proc-ignore/README.md
+++ b/packages/support-flags/--proc-ignore/README.md
@@ -1 +1,4 @@
-# Ignore from all process
+# `--proc-ignore` Flag
+
+- Visit the [design documentation](../docs/--proc-ignore.md)
+- View it on Grida [Docs](https://grida.co/docs/flags/--proc-ignore)
diff --git a/packages/support-flags/--proc-skip/README.md b/packages/support-flags/--proc-skip/README.md
index 9d39b560..0db0f894 100644
--- a/packages/support-flags/--proc-skip/README.md
+++ b/packages/support-flags/--proc-skip/README.md
@@ -1 +1,4 @@
-# Don't Ignore, but skip for interpreter
+# `--proc-skip` Flag
+
+- Visit the [design documentation](../docs/--proc-skip.md)
+- View it on Grida [Docs](https://grida.co/docs/flags/--proc-skip)
diff --git a/packages/support-flags/--responsive-id/README.md b/packages/support-flags/--responsive-id/README.md
index b5ff6a98..382c3d24 100644
--- a/packages/support-flags/--responsive-id/README.md
+++ b/packages/support-flags/--responsive-id/README.md
@@ -1,29 +1,4 @@
-# `--responsive-part-id` Flag (Draft)
+# `--responsive-id` Flag
 
-> This flag is part of id indicator family
-
-While designing responsive screen with breakpoints, you can use this flag to specify the id of a layer that should match other breakpoints' hierarchy to generate unified responsive style code.
-
-## Example
-
-```
-# on section hero, size of 1440, xl
---responsive-part-id=hero-section
---breakpoint=xl
-
-# on section hero, size of 1280, lg
---responsive-part-id=hero-section
---breakpoint=lg
-
-# on section hero, size of 1024, md
---responsive-part-id=hero-section
---breakpoint=md
-
-# on section hero, size of 768, sm
---responsive-part-id=hero-section
---breakpoint=sm
-
-# on section hero, size of 320, xs
---responsive-part-id=hero-section
---breakpoint=xs
-```
+- Visit the [design documentation](../docs/--responsive-id.md)
+- View it on Grida [Docs](https://grida.co/docs/flags/--responsive-id)
diff --git a/packages/support-flags/--root/README.md b/packages/support-flags/--root/README.md
index df07d9cf..04295201 100644
--- a/packages/support-flags/--root/README.md
+++ b/packages/support-flags/--root/README.md
@@ -1,18 +1,4 @@
-## `--root` Flag (Draft)
+# `--root` Flag
 
-This speficies that the node should be interpreted as root of the layout.
-
-## Syntax
-
-```ts
-`--root` | `--root=${typeof boolean}` | `--root=<strategy-id>`;
-```
-
-## Example
-
-```
---root
---root=true
---root=false
---root=use-static-strategy
-```
+- Visit the [design documentation](../docs/--root.md)
+- View it on Grida [Docs](https://grida.co/docs/flags/--root)
diff --git a/packages/support-flags/--scope/README.md b/packages/support-flags/--scope/README.md
index a23393f5..1880d845 100644
--- a/packages/support-flags/--scope/README.md
+++ b/packages/support-flags/--scope/README.md
@@ -1,23 +1,4 @@
-# `--scope` Flag (Draft)
+# `--scope` Flag
 
-A Scope specification is a general-perpose flag that can be used to specify a scope of a component or a content.
-
-```
-
-```
-
-## Reserved Keywords
-
-- this - `--scope=this`
-- parent - `--scope=parent`
-- screen - `--scope=screen`
-- frame - `--scope=frame`
-
-## Examples
-
-```
---scope=hero-sections
---id=contents-layout
-```
-
-> this will create a namespace with `hero-sections.contents-layout`. With real-world example, scope and id can be used to indicate the duplicated layouts on breakpoints are the same layer, which needs only the style to be differenciated.
+- Visit the [design documentation](../docs/--scope.md)
+- View it on Grida [Docs](https://grida.co/docs/flags/--scope)
diff --git a/packages/support-flags/--scroll/README.md b/packages/support-flags/--scroll/README.md
index 7240e0fa..3abe59f8 100644
--- a/packages/support-flags/--scroll/README.md
+++ b/packages/support-flags/--scroll/README.md
@@ -1,3 +1,4 @@
-## See also
+# `--scroll` Flag
 
-[`--overflow`](../--overflow/README.md)
+- Visit the [design documentation](../docs/--scroll.md)
+- View it on Grida [Docs](https://grida.co/docs/flags/--scroll)
diff --git a/packages/support-flags/--text-template/README.md b/packages/support-flags/--text-template/README.md
index 7eeee937..3560b2ef 100644
--- a/packages/support-flags/--text-template/README.md
+++ b/packages/support-flags/--text-template/README.md
@@ -1,7 +1,4 @@
-# Text Template
+# `--text-template` Flag
 
-```
-text-value: Hi, Universe. Welcome to Grida.
-template: "Hi, {{username}}. Welcome to Grida."
-extracted-data: { username: "Universe" }
-```
+- Visit the [design documentation](../docs/--text-template.md)
+- View it on Grida [Docs](https://grida.co/docs/flags/--text-template)
diff --git a/packages/support-flags/--use-flag/README.md b/packages/support-flags/--use-flag/README.md
index 40638cfd..ecdfaebc 100644
--- a/packages/support-flags/--use-flag/README.md
+++ b/packages/support-flags/--use-flag/README.md
@@ -1,3 +1,4 @@
-# `--use-flag` Flag (Draft)
+# `--use-flag` Flag
 
-Defaults to `true` (even while non specified), turns off flag feature for children when `false`.
+- Visit the [design documentation](../docs/--use-flag.md)
+- View it on Grida [Docs](https://grida.co/docs/flags/--use-flag)
diff --git a/packages/support-flags/--video/README.md b/packages/support-flags/--video/README.md
index e69de29b..5b031ca6 100644
--- a/packages/support-flags/--video/README.md
+++ b/packages/support-flags/--video/README.md
@@ -0,0 +1,4 @@
+# `--video` Flag
+
+- Visit the [design documentation](../docs/--video.md)
+- View it on Grida [Docs](https://grida.co/docs/flags/--video)
diff --git a/packages/support-flags/--webview-src/README.md b/packages/support-flags/--webview-src/README.md
index 74ea3c42..b04bae37 100644
--- a/packages/support-flags/--webview-src/README.md
+++ b/packages/support-flags/--webview-src/README.md
@@ -1,3 +1,4 @@
-# Indiacting that the layer is for containing an external webview
+# `--webview-src` Flag
 
-## iframe for web platform, webview for ios/android/flutter
+- Visit the [design documentation](../docs/--webview-src.md)
+- View it on Grida [Docs](https://grida.co/docs/flags/--webview-src)
diff --git a/packages/support-flags/--width/README.md b/packages/support-flags/--width/README.md
index 40beb9cb..7689932b 100644
--- a/packages/support-flags/--width/README.md
+++ b/packages/support-flags/--width/README.md
@@ -1,117 +1,4 @@
-# `--width` for explicit width
+# `--width` Flag
 
-**Accepted keys**
-
-- `--width`
-- `--w`
-
-## Syntax
-
-```ts
-`--width=${typeof length}`;
-```
-
-## Example
-
-```
---width=100
---w=100
-
---width=100px
-
---width=400vw
-```
-
-## Behavior
-
-**Element**
-There is no impact on element itself, but it can break relative layouts.
-
-**Style**
-When applied, this will force the node to be rendered with a `width` style.
-
-## (Proposal) (Draft) Advanced use
-
-> This feature is a proposal, won't work on production use.
-
-width and height support specifying min, max, and initial values.
-
-This is how it looks like:
-
-`--width=(initial)` or `--width=(min)-(max)-(initial)`
-
-```
---width=100px                // initial only
---width=100px-1080px-50vw    // min, max, initial
---width=100px-1080px         // min, max
---width=?-1080px             // min (none), max
---width=100px-?              // min , max (none)
---width=100px-?-50vw         // min , max (none), initial
-```
-
-you can skip the declaration with `?` keyword. this is a special keyword, interpreted as `undefined`
-
-"`--width=100px-?-50vw`" this will make css for example, as below.
-
-```css
-.foo {
-  min-width: 100px;
-  width: 50vw;
-}
-```
-
-"`--width=100px-1080px`" this indicates only min and max, yet, still the width will be specified based on current width of the origin design.
-
-```css
-.foo {
-  min-width: 100px;
-  max-width: 1080px;
-  width: 400px; /* this is from the design */
-}
-```
-
-### Ignoring one of the property
-
-**Using explicit `--ignore` flag**
-to ignore the width, you can use new flag `--ignore` set to width. like so - `--ignore=width`
-
-```css
-.foo {
-  min-width: 100px;
-  max-width: 1080px;
-  /* width: 400px; this is ignored by --ignore flag */
-}
-```
-
-**Using `?` keyword**
-Otherwise, you can simply use silincer keyword `?` to ignore the width, like so - `--width=100px-1080px-?`
-
-This will also generate style like below.
-
-```css
-.foo {
-  min-width: 100px;
-  max-width: 1080px;
-  /* width: 400px; this is ignored by "?" keyword */
-}
-```
-
-### Referencing current value with `.`
-
-Setting max-width to current width (based on design) with - `--width=100px-.-.`
-
-This will generate style like below.
-
-```css
-.foo {
-  min-width: 100px;
-  max-width: 400px; /* the current width from design */
-  width: 400px; /* the current width from design */
-}
-```
-
-## See Also
-
-- [`--max-width`](../--max-width)
-- [`--min-width`](../--min-width)
-- [`--height`](../--height)
+- Visit the [design documentation](../docs/--width.md)
+- View it on Grida [Docs](https://grida.co/docs/flags/--width)
diff --git a/packages/support-flags/--x-code-component/README.md b/packages/support-flags/--x-code-component/README.md
index 0abdb4ba..4267fa61 100644
--- a/packages/support-flags/--x-code-component/README.md
+++ b/packages/support-flags/--x-code-component/README.md
@@ -1,5 +1,4 @@
-# `--x-code-component` - eXtended Code Component
+# `--x-code-component` Flag
 
-> A.k.a User provided code with interface
-
-User provided code, ready to except a props from parents.
+- Visit the [design documentation](../docs/--x-code-component.md)
+- View it on Grida [Docs](https://grida.co/docs/flags/--x-code-component)
diff --git a/packages/support-flags/--x-code-static/README.md b/packages/support-flags/--x-code-static/README.md
index 5271228b..acc118bb 100644
--- a/packages/support-flags/--x-code-static/README.md
+++ b/packages/support-flags/--x-code-static/README.md
@@ -1,3 +1,4 @@
-# `--x-code-static` - eXtended Code Static
+# `--x-code-static` Flag
 
-User provided static code
+- Visit the [design documentation](../docs/--x-code-static.md)
+- View it on Grida [Docs](https://grida.co/docs/flags/--x-code-static)
diff --git a/packages/support-flags/--x-lottie-view/README.md b/packages/support-flags/--x-lottie-view/README.md
index c74c250e..30fa9588 100644
--- a/packages/support-flags/--x-lottie-view/README.md
+++ b/packages/support-flags/--x-lottie-view/README.md
@@ -1 +1,4 @@
-# eXtended Lottie View
+# `--x-lottie-view` Flag
+
+- Visit the [design documentation](../docs/--x-lottie-view.md)
+- View it on Grida [Docs](https://grida.co/docs/flags/--x-lottie-view)
diff --git a/packages/support-flags/docs/----disable.md b/packages/support-flags/docs/----disable.md
new file mode 100644
index 00000000..12bf2227
--- /dev/null
+++ b/packages/support-flags/docs/----disable.md
@@ -0,0 +1 @@
+# `----<flag>` - Commenting a flag
diff --git a/packages/support-flags/docs/--action.md b/packages/support-flags/docs/--action.md
new file mode 100644
index 00000000..0f16e4ef
--- /dev/null
+++ b/packages/support-flags/docs/--action.md
@@ -0,0 +1 @@
+# `--action=<name>` - Action flag
diff --git a/packages/support-flags/docs/--artwork.md b/packages/support-flags/docs/--artwork.md
new file mode 100644
index 00000000..192273c1
--- /dev/null
+++ b/packages/support-flags/docs/--artwork.md
@@ -0,0 +1,40 @@
+## Artwork flag
+
+**Accepted keys**
+
+- `--artwork`
+
+## Syntax
+
+```ts
+`--artwork${"="typeof boolean}`
+```
+
+## Example
+
+```
+--artwork
+
+--artwork=true
+--artwork=false
+
+--artwork=yes
+--artwork=no
+
+----artwork
+```
+
+## Behavior
+
+**Interpreter**
+
+When applied, this will force the node to be exported as an image.
+
+**Render**
+
+- HTML: rendered as an `<img>` element.
+- Flutter: rendered as an `Image` widget.
+
+## See Also
+
+- [`--export-as`](../--export-as)
diff --git a/packages/support-flags/docs/--as-avatar.md b/packages/support-flags/docs/--as-avatar.md
new file mode 100644
index 00000000..287be6e6
--- /dev/null
+++ b/packages/support-flags/docs/--as-avatar.md
@@ -0,0 +1,6 @@
+# `--as=avatar` - [Reflect UI](https://reflect-ui.com) Avatar Widget Indication Flag
+
+## Syntax
+
+- `--as-avatar`
+- `--as=avatar`
diff --git a/packages/support-flags/docs/--as-br.md b/packages/support-flags/docs/--as-br.md
new file mode 100644
index 00000000..b6054b02
--- /dev/null
+++ b/packages/support-flags/docs/--as-br.md
@@ -0,0 +1,17 @@
+---
+stage:
+  - proposal
+  - draft
+---
+
+<!-- Insider's note. -->
+<!-- We haven't find the correct scenario that this flag is required. -->
+<!-- Leaving this feature as proposal -->
+
+# (Draft) `--as-br` As Break
+
+## Interprets the flagged element as break (`<br/>`).
+
+## When to use
+
+While designing a text layout, or a paragraph, we tend to use autolayout (a flex layout) to contain multiple text to be visually displayed as single text.
diff --git a/packages/support-flags/docs/--as-button.md b/packages/support-flags/docs/--as-button.md
new file mode 100644
index 00000000..d24f91b1
--- /dev/null
+++ b/packages/support-flags/docs/--as-button.md
@@ -0,0 +1,6 @@
+# `--as=button` - [Reflect UI](https://reflect-ui.com) Button Widget Indication Flag
+
+## Syntax
+
+- `--as-button`
+- `--as=button`
diff --git a/packages/support-flags/docs/--as-char.md b/packages/support-flags/docs/--as-char.md
new file mode 100644
index 00000000..659c2e40
--- /dev/null
+++ b/packages/support-flags/docs/--as-char.md
@@ -0,0 +1,18 @@
+# As Character
+
+## See also
+
+- `--as-space`
+- `--as-text-group`
+
+## When to use
+
+Some characters can't be displayed in design tool with only using pure text.
+
+Special characters, custom emoji, custom image, etc.
+
+## Example
+
+```
+--as-char="🤔"
+```
diff --git a/packages/support-flags/docs/--as-checkbox.md b/packages/support-flags/docs/--as-checkbox.md
new file mode 100644
index 00000000..4d0fe6ee
--- /dev/null
+++ b/packages/support-flags/docs/--as-checkbox.md
@@ -0,0 +1,7 @@
+# `--as=checkbox` - [Reflect UI](https://reflect-ui.com) Checkbox Widget Indication Flag
+
+## Syntax
+
+- `--as-checkbox`
+- `--as-checkbox=true`
+- `--as=checkbox`
diff --git a/packages/support-flags/docs/--as-divider.md b/packages/support-flags/docs/--as-divider.md
new file mode 100644
index 00000000..c64d2e62
--- /dev/null
+++ b/packages/support-flags/docs/--as-divider.md
@@ -0,0 +1,7 @@
+# `--as=divider` - [Reflect UI](https://reflect-ui.com) Divider Widget Indication Flag
+
+## Syntax
+
+- `--as-divider`
+- `--as-divider=true`
+- `--as=divider`
diff --git a/packages/support-flags/docs/--as-h1.md b/packages/support-flags/docs/--as-h1.md
new file mode 100644
index 00000000..e5cd9812
--- /dev/null
+++ b/packages/support-flags/docs/--as-h1.md
@@ -0,0 +1,55 @@
+---
+stage:
+  - production
+  - staging
+  - experimental
+---
+
+# `--as-h1` As Heading1
+
+**Accepted keys**
+
+- `--as-h1`
+- `--as-heading1`
+- `--as-headline1`
+- `--h1`
+- `--heading1`
+- `--headline1`
+
+## Syntax
+
+```ts
+`--h1${"="typeof boolean}`
+```
+
+## Example
+
+```
+--h1
+
+--h1=true
+--h1=false
+
+--h1=yes
+--h1=no
+
+----h1
+```
+
+## Behavior
+
+**Element**
+When applied, this will force the node to be rendered as a `<h1>` element.
+
+**Text style**
+We don't yet support text style matching with `--h1` flag.
+
+## See Also
+
+- [`--as-h2`](../--as-h2)
+- [`--as-h3`](../--as-h3)
+- [`--as-h4`](../--as-h4)
+- [`--as-h5`](../--as-h5)
+- [`--as-h6`](../--as-h6)
+- [`--as-p`](../--as-p)
+- [`--as-br`](../--as-br)
diff --git a/packages/support-flags/docs/--as-h2.md b/packages/support-flags/docs/--as-h2.md
new file mode 100644
index 00000000..9bd9cc32
--- /dev/null
+++ b/packages/support-flags/docs/--as-h2.md
@@ -0,0 +1,55 @@
+---
+stage:
+  - production
+  - staging
+  - experimental
+---
+
+# `--as-h2` As Heading2
+
+**Accepted keys**
+
+- `--as-h2`
+- `--as-heading2`
+- `--as-headline2`
+- `--h2`
+- `--heading2`
+- `--headline2`
+
+## Syntax
+
+```ts
+`--h2${"="typeof boolean}`
+```
+
+## Example
+
+```
+--h2
+
+--h2=true
+--h2=false
+
+--h2=yes
+--h2=no
+
+----h2
+```
+
+## Behavior
+
+**Element**
+When applied, this will force the node to be rendered as a `<h2>` element.
+
+**Text style**
+We don't yet support text style matching with `--h2` flag.
+
+## See Also
+
+- [`--as-h1`](../--as-h1)
+- [`--as-h3`](../--as-h3)
+- [`--as-h4`](../--as-h4)
+- [`--as-h5`](../--as-h5)
+- [`--as-h6`](../--as-h6)
+- [`--as-p`](../--as-p)
+- [`--as-br`](../--as-br)
diff --git a/packages/support-flags/docs/--as-h3.md b/packages/support-flags/docs/--as-h3.md
new file mode 100644
index 00000000..8adfd930
--- /dev/null
+++ b/packages/support-flags/docs/--as-h3.md
@@ -0,0 +1,55 @@
+---
+stage:
+  - production
+  - staging
+  - experimental
+---
+
+# `--as-h3` As Heading3
+
+**Accepted keys**
+
+- `--as-h3`
+- `--as-heading3`
+- `--as-headline3`
+- `--h3`
+- `--heading3`
+- `--headline3`
+
+## Syntax
+
+```ts
+`--h3${"="typeof boolean}`
+```
+
+## Example
+
+```
+--h3
+
+--h3=true
+--h3=false
+
+--h3=yes
+--h3=no
+
+----h3
+```
+
+## Behavior
+
+**Element**
+When applied, this will force the node to be rendered as a `<h3>` element.
+
+**Text style**
+We don't yet support text style matching with `--h3` flag.
+
+## See Also
+
+- [`--as-h1`](../--as-h1)
+- [`--as-h2`](../--as-h2)
+- [`--as-h4`](../--as-h4)
+- [`--as-h5`](../--as-h5)
+- [`--as-h6`](../--as-h6)
+- [`--as-p`](../--as-p)
+- [`--as-br`](../--as-br)
diff --git a/packages/support-flags/docs/--as-h4.md b/packages/support-flags/docs/--as-h4.md
new file mode 100644
index 00000000..bbae2a70
--- /dev/null
+++ b/packages/support-flags/docs/--as-h4.md
@@ -0,0 +1,55 @@
+---
+stage:
+  - production
+  - staging
+  - experimental
+---
+
+# `--as-h4` As Heading4
+
+**Accepted keys**
+
+- `--as-h4`
+- `--as-heading4`
+- `--as-headline4`
+- `--h4`
+- `--heading4`
+- `--headline4`
+
+## Syntax
+
+```ts
+`--h4${"="typeof boolean}`
+```
+
+## Example
+
+```
+--h4
+
+--h4=true
+--h4=false
+
+--h4=yes
+--h4=no
+
+----h4
+```
+
+## Behavior
+
+**Element**
+When applied, this will force the node to be rendered as a `<h4>` element.
+
+**Text style**
+We don't yet support text style matching with `--h4` flag.
+
+## See Also
+
+- [`--as-h1`](../--as-h1)
+- [`--as-h2`](../--as-h2)
+- [`--as-h3`](../--as-h3)
+- [`--as-h5`](../--as-h5)
+- [`--as-h6`](../--as-h6)
+- [`--as-p`](../--as-p)
+- [`--as-br`](../--as-br)
diff --git a/packages/support-flags/docs/--as-h5.md b/packages/support-flags/docs/--as-h5.md
new file mode 100644
index 00000000..5503a80a
--- /dev/null
+++ b/packages/support-flags/docs/--as-h5.md
@@ -0,0 +1,55 @@
+---
+stage:
+  - production
+  - staging
+  - experimental
+---
+
+# `--as-h5` As Heading5
+
+**Accepted keys**
+
+- `--as-h5`
+- `--as-heading5`
+- `--as-headline5`
+- `--h5`
+- `--heading5`
+- `--headline5`
+
+## Syntax
+
+```ts
+`--h5${"="typeof boolean}`
+```
+
+## Example
+
+```
+--h5
+
+--h5=true
+--h5=false
+
+--h5=yes
+--h5=no
+
+----h5
+```
+
+## Behavior
+
+**Element**
+When applied, this will force the node to be rendered as a `<h5>` element.
+
+**Text style**
+We don't yet support text style matching with `--h5` flag.
+
+## See Also
+
+- [`--as-h1`](../--as-h1)
+- [`--as-h2`](../--as-h2)
+- [`--as-h3`](../--as-h3)
+- [`--as-h4`](../--as-h4)
+- [`--as-h6`](../--as-h6)
+- [`--as-p`](../--as-p)
+- [`--as-br`](../--as-br)
diff --git a/packages/support-flags/docs/--as-h6.md b/packages/support-flags/docs/--as-h6.md
new file mode 100644
index 00000000..3db14248
--- /dev/null
+++ b/packages/support-flags/docs/--as-h6.md
@@ -0,0 +1,55 @@
+---
+stage:
+  - production
+  - staging
+  - experimental
+---
+
+# `--as-h6` As Heading6
+
+**Accepted keys**
+
+- `--as-h6`
+- `--as-heading6`
+- `--as-headline6`
+- `--h6`
+- `--heading6`
+- `--headline6`
+
+## Syntax
+
+```ts
+`--h6${"="typeof boolean}`
+```
+
+## Example
+
+```
+--h6
+
+--h6=true
+--h6=false
+
+--h6=yes
+--h6=no
+
+----h6
+```
+
+## Behavior
+
+**Element**
+When applied, this will force the node to be rendered as a `<h6>` element.
+
+**Text style**
+We don't yet support text style matching with `--h6` flag.
+
+## See Also
+
+- [`--as-h1`](../--as-h1)
+- [`--as-h2`](../--as-h2)
+- [`--as-h3`](../--as-h3)
+- [`--as-h4`](../--as-h4)
+- [`--as-h5`](../--as-h5)
+- [`--as-p`](../--as-p)
+- [`--as-br`](../--as-br)
diff --git a/packages/support-flags/docs/--as-input.md b/packages/support-flags/docs/--as-input.md
new file mode 100644
index 00000000..c5118056
--- /dev/null
+++ b/packages/support-flags/docs/--as-input.md
@@ -0,0 +1,7 @@
+# `--as=input` - [Reflect UI](https://reflect-ui.com) Input (TextField) Widget Indication Flag
+
+## Syntax
+
+- `--as-input`
+- `--as-input=true`
+- `--as=input`
diff --git a/packages/support-flags/docs/--as-list.md b/packages/support-flags/docs/--as-list.md
new file mode 100644
index 00000000..342a7322
--- /dev/null
+++ b/packages/support-flags/docs/--as-list.md
@@ -0,0 +1,7 @@
+# `--as=list` - [Reflect UI](https://reflect-ui.com) ListView Widget Indication Flag
+
+## Syntax
+
+- `--as-list`
+- `--as-list=true`
+- `--as=list`
diff --git a/packages/support-flags/docs/--as-mdi.md b/packages/support-flags/docs/--as-mdi.md
new file mode 100644
index 00000000..45b3d5b5
--- /dev/null
+++ b/packages/support-flags/docs/--as-mdi.md
@@ -0,0 +1,11 @@
+# `--as=mdi` - [Reflect UI](https://reflect-ui.com) Material Design Icon Widget Indication Flag
+
+## Syntax
+
+- `--as-mdi`
+- `--as-mdi=true`
+- `--as=mdi`
+
+## Fallback
+
+- `--as-icon`
diff --git a/packages/support-flags/docs/--as-modal.md b/packages/support-flags/docs/--as-modal.md
new file mode 100644
index 00000000..c9c441fd
--- /dev/null
+++ b/packages/support-flags/docs/--as-modal.md
@@ -0,0 +1,7 @@
+# `--as=modal` - [Reflect UI](https://reflect-ui.com) Modal Widget Indication Flag
+
+## Syntax
+
+- `--as-modal`
+- `--as-modal=true`
+- `--as=modal`
diff --git a/packages/support-flags/docs/--as-nbsp.md b/packages/support-flags/docs/--as-nbsp.md
new file mode 100644
index 00000000..b0630ed3
--- /dev/null
+++ b/packages/support-flags/docs/--as-nbsp.md
@@ -0,0 +1,36 @@
+# `--as-nbsp` As Non-Breaking Space
+
+**Accepted keys**
+
+- `--as-nbsp`
+- `--as-space`
+- `--nbsp`
+
+**`--as-nbsp` Extends `--as-char`**
+
+> `--as-nbsp` is equivalent to `--as-char=&nbsp;` or `--as-char=" "`
+
+## Syntax
+
+```ts
+`--nbsp${"="typeof number}`
+```
+
+## Example
+
+```
+--nbsp       // 1 space, with `"&nbsp;"` on html
+--as-nbsp    // 1 space, with `"&nbsp;"` on html
+--as-space   // 1 space, with `" "` on html, if not available, e.g. on trailing, uses `"&nbsp;"`.
+
+
+--nbsp=2     // 2 spaces
+--nbsp=3     // 3 spaces
+
+
+----nbsp=2   // commented out
+```
+
+## See also
+
+- [`--as-char`](../--as-char)
diff --git a/packages/support-flags/docs/--as-p.md b/packages/support-flags/docs/--as-p.md
new file mode 100644
index 00000000..c33c2aca
--- /dev/null
+++ b/packages/support-flags/docs/--as-p.md
@@ -0,0 +1,48 @@
+# `--as-p` As Paragraph (Text)
+
+> This flag is for web platform. Otherwise, it will be ignored, have no impact on the final output.
+
+**Accepted keys**
+
+- `--as-p`
+- `--as-paragraph`
+- `--paragraph`
+
+## Syntax
+
+```ts
+`--as-p${"="typeof boolean}`
+```
+
+## Example
+
+```
+--paragraph
+
+--paragraph=true
+--paragraph=false
+
+--paragraph=yes
+--paragraph=no
+
+----paragraph
+```
+
+## Behavior
+
+**Element**
+When applied, this will force the node to be rendered as a `<p>` element.
+
+**Text style**
+We don't yet support text style matching with `--p` flag.
+
+## See Also
+
+- [`--as-h1`](../--as-h1)
+- [`--as-h2`](../--as-h2)
+- [`--as-h3`](../--as-h3)
+- [`--as-h4`](../--as-h4)
+- [`--as-h5`](../--as-h5)
+- [`--as-h6`](../--as-h6)
+- [`--as-p`](../--as-p)
+- [`--as-br`](../--as-br)
diff --git a/packages/support-flags/docs/--as-resizable.md b/packages/support-flags/docs/--as-resizable.md
new file mode 100644
index 00000000..eb4f5b59
--- /dev/null
+++ b/packages/support-flags/docs/--as-resizable.md
@@ -0,0 +1 @@
+# Resizable widget indication
diff --git a/packages/support-flags/docs/--as-size.md b/packages/support-flags/docs/--as-size.md
new file mode 100644
index 00000000..c203dcad
--- /dev/null
+++ b/packages/support-flags/docs/--as-size.md
@@ -0,0 +1,8 @@
+# Mark as size
+
+## Will be
+
+```
+element: --as-size
+is: Sized() | Container() | Padding()
+```
diff --git a/packages/support-flags/docs/--as-slider.md b/packages/support-flags/docs/--as-slider.md
new file mode 100644
index 00000000..0a061dc0
--- /dev/null
+++ b/packages/support-flags/docs/--as-slider.md
@@ -0,0 +1,7 @@
+# `--as=slider` - [Reflect UI](https://reflect-ui.com) Slider Widget Indication Flag
+
+## Syntax
+
+- `--as-slider`
+- `--as-slider=true`
+- `--as=slider`
diff --git a/packages/support-flags/docs/--as-span.md b/packages/support-flags/docs/--as-span.md
new file mode 100644
index 00000000..85325de1
--- /dev/null
+++ b/packages/support-flags/docs/--as-span.md
@@ -0,0 +1,59 @@
+# `--as-span` As TextSpan (Text)
+
+> This flag is for web platform. Otherwise, it will be ignored, have no impact on the final output.
+
+**Accepted keys**
+
+- `--as-span`
+- `--as-text-span`
+- `--as-textspan`
+- `--text-span`
+- `--textspan`
+
+## Syntax
+
+```ts
+`--as-span${"="typeof boolean}`
+```
+
+## Example
+
+```
+--as-span
+
+--as-span=true
+--as-span=false
+
+--as-span=yes
+--as-span=no
+
+----as-span
+```
+
+## Behavior
+
+**Element**
+When applied, this will force the node to be rendered as a `<span>` element.
+
+**Text style**
+We don't yet support text style matching with `--as-span` flag.
+
+## Anatomy
+
+```ts
+export interface AsSpanFlag {
+  flag: "as-span" | "as-text-span" | "as-textspan" | "text-span" | "textspan";
+
+  value?: boolean;
+}
+```
+
+## See Also
+
+- [`--as-h1`](../--as-h1)
+- [`--as-h2`](../--as-h2)
+- [`--as-h3`](../--as-h3)
+- [`--as-h4`](../--as-h4)
+- [`--as-h5`](../--as-h5)
+- [`--as-h6`](../--as-h6)
+- [`--as-p`](../--as-p)
diff --git a/packages/support-flags/docs/--as-text-group.md b/packages/support-flags/docs/--as-text-group.md
new file mode 100644
index 00000000..69332d0e
--- /dev/null
+++ b/packages/support-flags/docs/--as-text-group.md
@@ -0,0 +1,3 @@
+## (Draft) Text group
+
+While creating a multilined, complex text, for example, inserting a custom emoji, or a custom image, we need to use a text group. This is usually done by using a autolayout or col-row oriented multiple autolayouts.
diff --git a/packages/support-flags/docs/--as-toggle.md b/packages/support-flags/docs/--as-toggle.md
new file mode 100644
index 00000000..2440cb79
--- /dev/null
+++ b/packages/support-flags/docs/--as-toggle.md
@@ -0,0 +1,7 @@
+# `--as=toggle` - [Reflect UI](https://reflect-ui.com) Toggle Widget Indication Flag
+
+## Syntax
+
+- `--as-toggle`
+- `--as-toggle=true`
+- `--as=toggle`
diff --git a/packages/support-flags/docs/--as-wrap.md b/packages/support-flags/docs/--as-wrap.md
new file mode 100644
index 00000000..d6971554
--- /dev/null
+++ b/packages/support-flags/docs/--as-wrap.md
@@ -0,0 +1,15 @@
+# `--as=wrap` - flexbox / Wrap / [Reflect UI](https://reflect-ui.com) Wrap Widget Indication Flag
+
+(describing based on figma) Since no major design tool supports wrapping behaviour of the layout, we can use --as-wrap flag to indicate nested autolayout (e.g. `row([col([row, row, row]), col([row, row, row])])`) as a `wrap(item, item, item, item, item, item)`
+
+## Syntax
+
+- `--as-wrap`
+- `--as-wrap=true`
+- `--as=wrap`
+
+## Can be
+
+- flexbox on css
+- Wrap on flutter
+- Wrap with reflect-ui
diff --git a/packages/support-flags/docs/--break-color.md b/packages/support-flags/docs/--break-color.md
new file mode 100644
index 00000000..9738cb4c
--- /dev/null
+++ b/packages/support-flags/docs/--break-color.md
@@ -0,0 +1,8 @@
+# `--break-color` - Break Color (A.k.a Raw Color)
+
+Breaks the color style constraints.
+
+```
+input: colorstyle=primary-light-blue
+output: rgb(173, 216, 230)
+```
diff --git a/packages/support-flags/docs/--break-component.md b/packages/support-flags/docs/--break-component.md
new file mode 100644
index 00000000..5f79d826
--- /dev/null
+++ b/packages/support-flags/docs/--break-component.md
@@ -0,0 +1,8 @@
+# `--break-component` - Break Component (A.k.a Raw View)
+
+Breaks the component constraints, interpret it as a raw copy of the instance view
+
+```
+origianlly: <AppHeaderBar>
+wouldbe: <div id="app-header-bar-1">...</div>
+```
diff --git a/packages/support-flags/docs/--camera-display.md b/packages/support-flags/docs/--camera-display.md
new file mode 100644
index 00000000..6d0a4647
--- /dev/null
+++ b/packages/support-flags/docs/--camera-display.md
@@ -0,0 +1,10 @@
+# Camera display
+
+## Platforms
+
+- web
+  - uses: webcam
+  - @reflect-ui/universal-camera-view
+- flutter
+  - uses: device cam[0]
+  - flutter-universal-camera-view by reflect-ui
diff --git a/packages/support-flags/docs/--class.md b/packages/support-flags/docs/--class.md
new file mode 100644
index 00000000..97dbedaa
--- /dev/null
+++ b/packages/support-flags/docs/--class.md
@@ -0,0 +1,7 @@
+# Custom css class indication (extends)
+
+```
+origainally: class="container"
+input: class=custom-big-box
+outpug: class="container custom-big-box"
+```
diff --git a/packages/support-flags/docs/--content-id.md b/packages/support-flags/docs/--content-id.md
new file mode 100644
index 00000000..fc76c37f
--- /dev/null
+++ b/packages/support-flags/docs/--content-id.md
@@ -0,0 +1,3 @@
+## `--content-id` Flag (Draft)
+
+> Familly of id specifiers.
diff --git a/packages/support-flags/docs/--cursor.md b/packages/support-flags/docs/--cursor.md
new file mode 100644
index 00000000..2d316dd1
--- /dev/null
+++ b/packages/support-flags/docs/--cursor.md
@@ -0,0 +1,12 @@
+# Mouse cursor indication
+
+- `--cursor=pointer`
+- `--cursor=wait`
+- `--cursor=text`
+- `--cursor=ew-resize`
+- `--cursor=url(https://example.com/cursor.png)`
+- and any other standard css cursor value from [CSS#Cursor](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor)
+
+## Fallbacks to
+
+- `--cursor=auto`
diff --git a/packages/support-flags/docs/--dynamic-container.md b/packages/support-flags/docs/--dynamic-container.md
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/support-flags/docs/--dynamic-item.md b/packages/support-flags/docs/--dynamic-item.md
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/support-flags/docs/--empty-content.md b/packages/support-flags/docs/--empty-content.md
new file mode 100644
index 00000000..73635c2e
--- /dev/null
+++ b/packages/support-flags/docs/--empty-content.md
@@ -0,0 +1,8 @@
+# Empty (command) A Content
+
+> This does not indicate that current view has a empty content, but indicates that it **should** have a empty content.
+
+## See also
+
+- [`--dynamic-item`](../--dynamic-item/README.md)
+- [`--dynamic-content`](../--dynamic-container/README.md)
diff --git a/packages/support-flags/docs/--exact-height.md b/packages/support-flags/docs/--exact-height.md
new file mode 100644
index 00000000..26cdc8a5
--- /dev/null
+++ b/packages/support-flags/docs/--exact-height.md
@@ -0,0 +1,24 @@
+# `--exact-height` Flag (Draft)
+
+When applied, this will force dedicated layer's height to be ignore responsive height, use current height as fixed height instead.
+
+## Syntax
+
+```ts
+`--exact-height${"="typeof boolean}`
+```
+
+## Example
+
+```
+--exact-height
+
+--exact-height=true
+--exact-height=false
+
+--exact-height=True
+--exact-height=False
+
+--exact-height=yes
+--exact-height=no
+```
diff --git a/packages/support-flags/docs/--exact-width.md b/packages/support-flags/docs/--exact-width.md
new file mode 100644
index 00000000..1f2c3d00
--- /dev/null
+++ b/packages/support-flags/docs/--exact-width.md
@@ -0,0 +1,24 @@
+# `--exact-width` Flag (Draft)
+
+When applied, this will force dedicated layer's `width` to be ignore responsive width, use current width as fixed width instead.
+
+## Syntax
+
+```ts
+`--exact-width${"="typeof boolean}`
+```
+
+## Example
+
+```
+--exact-width
+
+--exact-width=true
+--exact-width=false
+
+--exact-width=True
+--exact-width=False
+
+--exact-width=yes
+--exact-width=no
+```
diff --git a/packages/support-flags/docs/--export-as.md b/packages/support-flags/docs/--export-as.md
new file mode 100644
index 00000000..e892b75d
--- /dev/null
+++ b/packages/support-flags/docs/--export-as.md
@@ -0,0 +1,6 @@
+# Export As
+
+**Accepted keys**
+
+- `--export-as`
+- `--export`
diff --git a/packages/support-flags/docs/--export-gif.md b/packages/support-flags/docs/--export-gif.md
new file mode 100644
index 00000000..04ab396c
--- /dev/null
+++ b/packages/support-flags/docs/--export-gif.md
@@ -0,0 +1,5 @@
+# Export as gif
+
+## For non-gif-origin-content
+
+We'll create a 10 frame dummy gif based on the origin snapshot png, with a simple scale + shake animation
diff --git a/packages/support-flags/docs/--export-jpg.md b/packages/support-flags/docs/--export-jpg.md
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/support-flags/docs/--export-pdf.md b/packages/support-flags/docs/--export-pdf.md
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/support-flags/docs/--export-png.md b/packages/support-flags/docs/--export-png.md
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/support-flags/docs/--export-svg.md b/packages/support-flags/docs/--export-svg.md
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/support-flags/docs/--export.md b/packages/support-flags/docs/--export.md
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/support-flags/docs/--fix-bottom.md b/packages/support-flags/docs/--fix-bottom.md
new file mode 100644
index 00000000..216594a6
--- /dev/null
+++ b/packages/support-flags/docs/--fix-bottom.md
@@ -0,0 +1,7 @@
+# `--fix-bottom` Flag (Draft)
+
+When applied, this will force dedicated layer's bottom to be ignore responsive bottom, use current bottom as fixed bottom instead.
+
+> ⚠️ This is different from `--position-fixed`. In general, this flag is not used for designing a footer.
+
+## See also
diff --git a/packages/support-flags/docs/--fix-height.md b/packages/support-flags/docs/--fix-height.md
new file mode 100644
index 00000000..e6e13e7a
--- /dev/null
+++ b/packages/support-flags/docs/--fix-height.md
@@ -0,0 +1,24 @@
+# `--fix-height` Flag (Draft)
+
+When applied, this will force dedicated layer's `height` to be ignore responsive `height`, use current `height` as fixed `height` instead.
+
+## Syntax
+
+```ts
+`--fix-height${"="typeof boolean}`
+```
+
+## Example
+
+```
+--fix-height
+
+--fix-height=true
+--fix-height=false
+
+--fix-height=True
+--fix-height=False
+
+--fix-height=yes
+--fix-height=no
+```
diff --git a/packages/support-flags/docs/--fix-width.md b/packages/support-flags/docs/--fix-width.md
new file mode 100644
index 00000000..5e7b57f9
--- /dev/null
+++ b/packages/support-flags/docs/--fix-width.md
@@ -0,0 +1,28 @@
+# `--fix-width` Flag (Draft)
+
+When applied, this will force dedicated layer's `width` to be ignore responsive width, use current width as fixed width instead.
+
+**Accepted keys**
+
+- `--fix-width`
+
+## Syntax
+
+```ts
+`--fix-width${"="typeof boolean}`
+```
+
+## Example
+
+```
+--fix-width
+
+--fix-width=true
+--fix-width=false
+
+--fix-width=True
+--fix-width=False
+
+--fix-width=yes
+--fix-width=no
+```
diff --git a/packages/support-flags/docs/--hash.md b/packages/support-flags/docs/--hash.md
new file mode 100644
index 00000000..6a6a5d74
--- /dev/null
+++ b/packages/support-flags/docs/--hash.md
@@ -0,0 +1,25 @@
+# Hash
+
+> Hash is a unique id indicator just like `--id`, but for a asset such as vector & images
+
+## Allowed on
+
+- layer with single image fill (a image)
+- a vector layer
+
+## Use with `--main`
+
+```
+vector layer 1 --hash=my-brand-logo
+vector layer 2 --hash=my-brand-logo --main
+```
+
+Now vector 1 & 2 will use the same svg data, based on vector 2's svg data (since it's marked with `--main`).
+
+- do - set one layer as main
+- don't - set multiple layer with same hash with main (will show warning)
+- don't - no main layer specified - will use the first hit item.
+
+## See also
+
+- [`--id`](../--id/README.md)
diff --git a/packages/support-flags/docs/--height.md b/packages/support-flags/docs/--height.md
new file mode 100644
index 00000000..275732a6
--- /dev/null
+++ b/packages/support-flags/docs/--height.md
@@ -0,0 +1,117 @@
+# `--height` for explicit height
+
+**Accepted keys**
+
+- `--height`
+- `--h`
+
+## Syntax
+
+```ts
+`--height=${typeof length}`;
+```
+
+## Example
+
+```
+--height=100
+--h=100
+
+--height=100px
+
+--height=100vh
+```
+
+## Behavior
+
+**Element**
+There is no impact on element itself, but it can break relative layouts.
+
+**Style**
+When applied, this will force the node to be rendered with a `height` style.
+
+## (Proposal) (Draft) Advanced use
+
+> This feature is a proposal, won't work on production use.
+
+height and height support specifying min, max, and initial values.
+
+This is how it looks like:
+
+`--height=(initial)` or `--height=(min)-(max)-(initial)`
+
+```
+--height=100px                // initial only
+--height=100px-1080px-50vh    // min, max, initial
+--height=100px-1080px         // min, max
+--height=?-1080px             // min (none), max
+--height=100px-?              // min , max (none)
+--height=100px-?-50vh         // min , max (none), initial
+```
+
+you can skip the declaration with `?` keyword. this is a special keyword, interpreted as `undefined`
+
+"`--height=100px-?-50vh`" this will make css for example, as below.
+
+```css
+.foo {
+  min-height: 100px;
+  height: 50vh;
+}
+```
+
+"`--height=100px-1080px`" this indicates only min and max, yet, still the height will be specified based on current height of the origin design.
+
+```css
+.foo {
+  min-height: 100px;
+  max-height: 1080px;
+  height: 400px; /* this is from the design */
+}
+```
+
+### Ignoring one of the property
+
+**Using explicit `--ignore` flag**
+to ignore the height, you can use new flag `--ignore` set to height. like so - `--ignore=height`
+
+```css
+.foo {
+  min-height: 100px;
+  max-height: 1080px;
+  /* height: 400px; this is ignored by --ignore flag */
+}
+```
+
+**Using `?` keyword**
+Otherwise, you can simply use silincer keyword `?` to ignore the height, like so - `--height=100px-1080px-?`
+
+This will also generate style like below.
+
+```css
+.foo {
+  min-height: 100px;
+  max-height: 1080px;
+  /* height: 400px; this is ignored by "?" keyword */
+}
+```
+
+### Referencing current value with `.`
+
+Setting max-height to current height (based on design) with - `--height=100px-.-.`
+
+This will generate style like below.
+
+```css
+.foo {
+  min-height: 100px;
+  max-height: 400px; /* the current height from design */
+  height: 400px; /* the current height from design */
+}
+```
+
+## See Also
+
+- [`--max-height`](../--max-height)
+- [`--min-height`](../--min-height)
+- [`--width`](../--width)
diff --git a/packages/support-flags/docs/--href.md b/packages/support-flags/docs/--href.md
new file mode 100644
index 00000000..43cc2e54
--- /dev/null
+++ b/packages/support-flags/docs/--href.md
@@ -0,0 +1,10 @@
+# Link (Href) data provider
+
+_Examples_
+
+- `--link=https://grida.co`
+- `--link=/signup`
+
+## Disclaimer
+
+We choosed name `link` instead of `href` since it is more intuitive across non web developers. Also NextJS has a component named `<Link/>` which suggested us the idea.
diff --git a/packages/support-flags/docs/--id.md b/packages/support-flags/docs/--id.md
new file mode 100644
index 00000000..35063f3a
--- /dev/null
+++ b/packages/support-flags/docs/--id.md
@@ -0,0 +1,14 @@
+# A Semantic ID Flag
+
+## When to use and what can it do?
+
+by specifing the id flag, you can take advantage in below scenarios.
+
+- Same vector, two different component, one for hover, one for default, only svg color is different. - in this case, you can set the id for both layer as same, so that the component code generation will not include the duplicated svg data / placeholder code.
+- id="value" on generated html output.
+
+<!-- TODO: provide more realworld usecase -->
+
+## See also
+
+- [`--hash`](../--hash/README.md)
diff --git a/packages/support-flags/docs/--ignore.md b/packages/support-flags/docs/--ignore.md
new file mode 100644
index 00000000..9c38060a
--- /dev/null
+++ b/packages/support-flags/docs/--ignore.md
@@ -0,0 +1,11 @@
+# Ignore the target property
+
+As a design choice, for example, a designer can add a boxshadow & radius to the frame of a website design frame. In this case, human developers can easily know that the boxshadow and the raius is a non relavent value and must be ignored. the `--ignore=<property>` flag can be used useful for this case.
+
+---
+
+e.g.
+
+- `--ignore=*` - same as [`//@ignore`](../@ignore/README.md)
+- `--ignore=effects`
+- `--ignore=border-radius`
diff --git a/packages/support-flags/docs/--is-input-caret.md b/packages/support-flags/docs/--is-input-caret.md
new file mode 100644
index 00000000..770366d1
--- /dev/null
+++ b/packages/support-flags/docs/--is-input-caret.md
@@ -0,0 +1,7 @@
+# Input caret indication
+
+We often tend to include interactive snapshot of the state, for example, a caret of text field on focused state. Designers often use vertical line, vertical slim rectangle or a text `"|"` to represent a input caret.
+
+Well of course, this should be ignored on the code.
+
+You can simply provide `--is-input-caret` flag on the caret design layer, so that the text field design can safely be interpreted and converted to a text field component code.
diff --git a/packages/support-flags/docs/--is-native-android-ui.md b/packages/support-flags/docs/--is-native-android-ui.md
new file mode 100644
index 00000000..87940e45
--- /dev/null
+++ b/packages/support-flags/docs/--is-native-android-ui.md
@@ -0,0 +1,3 @@
+# A Android UI Mocking layers
+
+e.g. A Notification banner, time & battery UI.
diff --git a/packages/support-flags/docs/--is-native-ios-ui.md b/packages/support-flags/docs/--is-native-ios-ui.md
new file mode 100644
index 00000000..bf1f8430
--- /dev/null
+++ b/packages/support-flags/docs/--is-native-ios-ui.md
@@ -0,0 +1,3 @@
+# A iOS UI Mocking layers
+
+e.g. A Notification banner, time & battery UI.
diff --git a/packages/support-flags/docs/--max-height.md b/packages/support-flags/docs/--max-height.md
new file mode 100644
index 00000000..c5a2f735
--- /dev/null
+++ b/packages/support-flags/docs/--max-height.md
@@ -0,0 +1,36 @@
+# Max height
+
+**Accepted keys**
+
+- `--max-height`
+- `--maxheight`
+
+## Syntax
+
+```ts
+`--max-height=${typeof length}`;
+```
+
+## Example
+
+```
+--max-height=100
+
+--max-height=100px
+
+--max-height=100vh
+```
+
+## Behavior
+
+**Element**
+There is no impact on element itself, but it can break relative layouts.
+
+**Style**
+When applied, this will force the node to be rendered with a `max-height` style.
+
+## See Also
+
+- [`--max-width`](../--max-width)
+- [`--min-height`](../--max-height)
+- [`--height`](../--height)
diff --git a/packages/support-flags/docs/--max-width.md b/packages/support-flags/docs/--max-width.md
new file mode 100644
index 00000000..6dd58b83
--- /dev/null
+++ b/packages/support-flags/docs/--max-width.md
@@ -0,0 +1,36 @@
+# Max width
+
+**Accepted keys**
+
+- `--max-width`
+- `--maxwidth`
+
+## Syntax
+
+```ts
+`--max-width=${typeof length}`;
+```
+
+## Example
+
+```
+--max-width=100
+
+--max-width=100px
+
+--max-width=400vw
+```
+
+## Behavior
+
+**Element**
+There is no impact on element itself, but it can break relative layouts.
+
+**Style**
+When applied, this will force the node to be rendered with a max-width style.
+
+## See Also
+
+- [`--max-height`](../--max-height)
+- [`--min-width`](../--max-width)
+- [`--width`](../--max-width)
diff --git a/packages/support-flags/docs/--media.md b/packages/support-flags/docs/--media.md
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/support-flags/docs/--min-height.md b/packages/support-flags/docs/--min-height.md
new file mode 100644
index 00000000..059d7771
--- /dev/null
+++ b/packages/support-flags/docs/--min-height.md
@@ -0,0 +1,36 @@
+# Min height
+
+**Accepted keys**
+
+- `--min-height`
+- `--minheight`
+
+## Syntax
+
+```ts
+`--min-height=${typeof length}`;
+```
+
+## Example
+
+```
+--min-height=100
+
+--min-height=100px
+
+--min-height=100vh
+```
+
+## Behavior
+
+**Element**
+There is no impact on element itself, but it can break relative layouts.
+
+**Style**
+When applied, this will force the node to be rendered with a `min-height` style.
+
+## See Also
+
+- [`--max-height`](../--max-height)
+- [`--min-width`](../--max-width)
+- [`--height`](../--height)
diff --git a/packages/support-flags/docs/--min-width.md b/packages/support-flags/docs/--min-width.md
new file mode 100644
index 00000000..28df8815
--- /dev/null
+++ b/packages/support-flags/docs/--min-width.md
@@ -0,0 +1,36 @@
+# Min width
+
+**Accepted keys**
+
+- `--min-width`
+- `--minwidth`
+
+## Syntax
+
+```ts
+`--min-width=${typeof length}`;
+```
+
+## Example
+
+```
+--min-width=100
+
+--min-width=100px
+
+--min-width=100vw
+```
+
+## Behavior
+
+**Element**
+There is no impact on element itself, but it can break relative layouts.
+
+**Style**
+When applied, this will force the node to be rendered with a `min-width` style.
+
+## See Also
+
+- [`--max-width`](../--max-width)
+- [`--min-height`](../--min-height)
+- [`--width`](../--width)
diff --git a/packages/support-flags/docs/--module.md b/packages/support-flags/docs/--module.md
new file mode 100644
index 00000000..6c457a2b
--- /dev/null
+++ b/packages/support-flags/docs/--module.md
@@ -0,0 +1,3 @@
+# Module flag
+
+When specific layer or a group of layer (container of multiple layers) is defined as a module, the code output will split the part as a module (file splitting).
diff --git a/packages/support-flags/docs/--motion-on-hover.md b/packages/support-flags/docs/--motion-on-hover.md
new file mode 100644
index 00000000..a78ae55f
--- /dev/null
+++ b/packages/support-flags/docs/--motion-on-hover.md
@@ -0,0 +1,9 @@
+## `--motion-on-hover` Flag (Draft)
+
+> Familly of `--motion-on-*` flags.
+
+example
+
+```txt
+--motion-on-hover=reflect-bounce-17-fancy
+```
diff --git a/packages/support-flags/docs/--motion.md b/packages/support-flags/docs/--motion.md
new file mode 100644
index 00000000..f2a2cf1f
--- /dev/null
+++ b/packages/support-flags/docs/--motion.md
@@ -0,0 +1,9 @@
+## `--motion` Flag (Draft)
+
+> Family of `--motion-*` flags.
+
+Example
+
+```txt
+--motion=auto
+```
diff --git a/packages/support-flags/docs/--onclick.md b/packages/support-flags/docs/--onclick.md
new file mode 100644
index 00000000..a04eb2c4
--- /dev/null
+++ b/packages/support-flags/docs/--onclick.md
@@ -0,0 +1,7 @@
+# OnClick
+
+## onclick alias (Also allowed)
+
+- ontap
+- ontouch
+- onclick
diff --git a/packages/support-flags/docs/--overflow.md b/packages/support-flags/docs/--overflow.md
new file mode 100644
index 00000000..c4d2fed5
--- /dev/null
+++ b/packages/support-flags/docs/--overflow.md
@@ -0,0 +1,3 @@
+## See also
+
+[`--scroll`](../--scroll/README.md)
diff --git a/packages/support-flags/docs/--position-fixed.md b/packages/support-flags/docs/--position-fixed.md
new file mode 100644
index 00000000..db2274fc
--- /dev/null
+++ b/packages/support-flags/docs/--position-fixed.md
@@ -0,0 +1,3 @@
+# Position as Fixed.
+
+describing based on figma, figma position is always absolute. there is not way to represent a fixed position. (we can, but only via fix position on scrolling)
diff --git a/packages/support-flags/docs/--position-sticky.md b/packages/support-flags/docs/--position-sticky.md
new file mode 100644
index 00000000..79ed0a42
--- /dev/null
+++ b/packages/support-flags/docs/--position-sticky.md
@@ -0,0 +1 @@
+# (WIP) Position as Sticky.
diff --git a/packages/support-flags/docs/--proc-ignore.md b/packages/support-flags/docs/--proc-ignore.md
new file mode 100644
index 00000000..fa968864
--- /dev/null
+++ b/packages/support-flags/docs/--proc-ignore.md
@@ -0,0 +1 @@
+# Ignore from all process
diff --git a/packages/support-flags/docs/--proc-skip.md b/packages/support-flags/docs/--proc-skip.md
new file mode 100644
index 00000000..9d39b560
--- /dev/null
+++ b/packages/support-flags/docs/--proc-skip.md
@@ -0,0 +1 @@
+# Don't Ignore, but skip for interpreter
diff --git a/packages/support-flags/docs/--responsive-id.md b/packages/support-flags/docs/--responsive-id.md
new file mode 100644
index 00000000..b5ff6a98
--- /dev/null
+++ b/packages/support-flags/docs/--responsive-id.md
@@ -0,0 +1,29 @@
+# `--responsive-part-id` Flag (Draft)
+
+> This flag is part of id indicator family
+
+While designing responsive screen with breakpoints, you can use this flag to specify the id of a layer that should match other breakpoints' hierarchy to generate unified responsive style code.
+
+## Example
+
+```
+# on section hero, size of 1440, xl
+--responsive-part-id=hero-section
+--breakpoint=xl
+
+# on section hero, size of 1280, lg
+--responsive-part-id=hero-section
+--breakpoint=lg
+
+# on section hero, size of 1024, md
+--responsive-part-id=hero-section
+--breakpoint=md
+
+# on section hero, size of 768, sm
+--responsive-part-id=hero-section
+--breakpoint=sm
+
+# on section hero, size of 320, xs
+--responsive-part-id=hero-section
+--breakpoint=xs
+```
diff --git a/packages/support-flags/docs/--root.md b/packages/support-flags/docs/--root.md
new file mode 100644
index 00000000..df07d9cf
--- /dev/null
+++ b/packages/support-flags/docs/--root.md
@@ -0,0 +1,18 @@
+## `--root` Flag (Draft)
+
+This speficies that the node should be interpreted as root of the layout.
+
+## Syntax
+
+```ts
+`--root` | `--root=${typeof boolean}` | `--root=<strategy-id>`;
+```
+
+## Example
+
+```
+--root
+--root=true
+--root=false
+--root=use-static-strategy
+```
diff --git a/packages/support-flags/docs/--scope.md b/packages/support-flags/docs/--scope.md
new file mode 100644
index 00000000..a23393f5
--- /dev/null
+++ b/packages/support-flags/docs/--scope.md
@@ -0,0 +1,23 @@
+# `--scope` Flag (Draft)
+
+A Scope specification is a general-perpose flag that can be used to specify a scope of a component or a content.
+
+```
+
+```
+
+## Reserved Keywords
+
+- this - `--scope=this`
+- parent - `--scope=parent`
+- screen - `--scope=screen`
+- frame - `--scope=frame`
+
+## Examples
+
+```
+--scope=hero-sections
+--id=contents-layout
+```
+
+> this will create a namespace with `hero-sections.contents-layout`. With real-world example, scope and id can be used to indicate the duplicated layouts on breakpoints are the same layer, which needs only the style to be differenciated.
diff --git a/packages/support-flags/docs/--scroll.md b/packages/support-flags/docs/--scroll.md
new file mode 100644
index 00000000..7240e0fa
--- /dev/null
+++ b/packages/support-flags/docs/--scroll.md
@@ -0,0 +1,3 @@
+## See also
+
+[`--overflow`](../--overflow/README.md)
diff --git a/packages/support-flags/docs/--text-template.md b/packages/support-flags/docs/--text-template.md
new file mode 100644
index 00000000..7eeee937
--- /dev/null
+++ b/packages/support-flags/docs/--text-template.md
@@ -0,0 +1,7 @@
+# Text Template
+
+```
+text-value: Hi, Universe. Welcome to Grida.
+template: "Hi, {{username}}. Welcome to Grida."
+extracted-data: { username: "Universe" }
+```
diff --git a/packages/support-flags/docs/--use-flag.md b/packages/support-flags/docs/--use-flag.md
new file mode 100644
index 00000000..40638cfd
--- /dev/null
+++ b/packages/support-flags/docs/--use-flag.md
@@ -0,0 +1,3 @@
+# `--use-flag` Flag (Draft)
+
+Defaults to `true` (even while non specified), turns off flag feature for children when `false`.
diff --git a/packages/support-flags/docs/--video.md b/packages/support-flags/docs/--video.md
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/support-flags/docs/--webview-src.md b/packages/support-flags/docs/--webview-src.md
new file mode 100644
index 00000000..74ea3c42
--- /dev/null
+++ b/packages/support-flags/docs/--webview-src.md
@@ -0,0 +1,3 @@
+# Indiacting that the layer is for containing an external webview
+
+## iframe for web platform, webview for ios/android/flutter
diff --git a/packages/support-flags/docs/--width.md b/packages/support-flags/docs/--width.md
new file mode 100644
index 00000000..40beb9cb
--- /dev/null
+++ b/packages/support-flags/docs/--width.md
@@ -0,0 +1,117 @@
+# `--width` for explicit width
+
+**Accepted keys**
+
+- `--width`
+- `--w`
+
+## Syntax
+
+```ts
+`--width=${typeof length}`;
+```
+
+## Example
+
+```
+--width=100
+--w=100
+
+--width=100px
+
+--width=400vw
+```
+
+## Behavior
+
+**Element**
+There is no impact on element itself, but it can break relative layouts.
+
+**Style**
+When applied, this will force the node to be rendered with a `width` style.
+
+## (Proposal) (Draft) Advanced use
+
+> This feature is a proposal, won't work on production use.
+
+width and height support specifying min, max, and initial values.
+
+This is how it looks like:
+
+`--width=(initial)` or `--width=(min)-(max)-(initial)`
+
+```
+--width=100px                // initial only
+--width=100px-1080px-50vw    // min, max, initial
+--width=100px-1080px         // min, max
+--width=?-1080px             // min (none), max
+--width=100px-?              // min , max (none)
+--width=100px-?-50vw         // min , max (none), initial
+```
+
+you can skip the declaration with `?` keyword. this is a special keyword, interpreted as `undefined`
+
+"`--width=100px-?-50vw`" this will make css for example, as below.
+
+```css
+.foo {
+  min-width: 100px;
+  width: 50vw;
+}
+```
+
+"`--width=100px-1080px`" this indicates only min and max, yet, still the width will be specified based on current width of the origin design.
+
+```css
+.foo {
+  min-width: 100px;
+  max-width: 1080px;
+  width: 400px; /* this is from the design */
+}
+```
+
+### Ignoring one of the property
+
+**Using explicit `--ignore` flag**
+to ignore the width, you can use new flag `--ignore` set to width. like so - `--ignore=width`
+
+```css
+.foo {
+  min-width: 100px;
+  max-width: 1080px;
+  /* width: 400px; this is ignored by --ignore flag */
+}
+```
+
+**Using `?` keyword**
+Otherwise, you can simply use silincer keyword `?` to ignore the width, like so - `--width=100px-1080px-?`
+
+This will also generate style like below.
+
+```css
+.foo {
+  min-width: 100px;
+  max-width: 1080px;
+  /* width: 400px; this is ignored by "?" keyword */
+}
+```
+
+### Referencing current value with `.`
+
+Setting max-width to current width (based on design) with - `--width=100px-.-.`
+
+This will generate style like below.
+
+```css
+.foo {
+  min-width: 100px;
+  max-width: 400px; /* the current width from design */
+  width: 400px; /* the current width from design */
+}
+```
+
+## See Also
+
+- [`--max-width`](../--max-width)
+- [`--min-width`](../--min-width)
+- [`--height`](../--height)
diff --git a/packages/support-flags/docs/--x-code-component.md b/packages/support-flags/docs/--x-code-component.md
new file mode 100644
index 00000000..0abdb4ba
--- /dev/null
+++ b/packages/support-flags/docs/--x-code-component.md
@@ -0,0 +1,5 @@
+# `--x-code-component` - eXtended Code Component
+
+> A.k.a User provided code with interface
+
+User provided code, ready to except a props from parents.
diff --git a/packages/support-flags/docs/--x-code-static.md b/packages/support-flags/docs/--x-code-static.md
new file mode 100644
index 00000000..5271228b
--- /dev/null
+++ b/packages/support-flags/docs/--x-code-static.md
@@ -0,0 +1,3 @@
+# `--x-code-static` - eXtended Code Static
+
+User provided static code
diff --git a/packages/support-flags/docs/--x-lottie-view.md b/packages/support-flags/docs/--x-lottie-view.md
new file mode 100644
index 00000000..c74c250e
--- /dev/null
+++ b/packages/support-flags/docs/--x-lottie-view.md
@@ -0,0 +1 @@
+# eXtended Lottie View
diff --git a/packages/support-flags/docs/README.md b/packages/support-flags/docs/README.md
new file mode 100644
index 00000000..607c2660
--- /dev/null
+++ b/packages/support-flags/docs/README.md
@@ -0,0 +1,5 @@
+# Flags Documentation directory.
+
+Go to [Index](./index.md)
+
+## Flags Api references are copied from support-flags package via script - `/scripts/docs-copy/flags-api-docs.sh`
diff --git a/packages/support-flags/docs/__readme_template__.md b/packages/support-flags/docs/__readme_template__.md
new file mode 100644
index 00000000..05d7fdae
--- /dev/null
+++ b/packages/support-flags/docs/__readme_template__.md
@@ -0,0 +1,4 @@
+# `{{flag}}` Flag
+
+- Visit the [design documentation](../docs/{{flag}}.md)
+- View it on Grida [Docs](https://grida.co/docs/flags/{{flag}})
diff --git a/packages/support-flags/docs/index.md b/packages/support-flags/docs/index.md
new file mode 100644
index 00000000..21cd5f13
--- /dev/null
+++ b/packages/support-flags/docs/index.md
@@ -0,0 +1,115 @@
+---
+title: "Flags (Proposal)"
+version: 0.1.0
+revision: 1
+---
+
+# Flags (Proposal)
+
+> Flag feature is not ready to use
+
+---
+
+> Flag is a strategy for specified extra context, passing arguments based on the node. Just like CLI, the syntax is `--flag-name` / `--flag-name=value` / `--flag-name value` / custom flags
+
+## Syntax
+
+flags shall be specified end of the node name like so - `"Header --fixed-position"`. You can name the layer as `"--fixed-position Header"`, but this will interpret the name of the layer as empty string. and take the "Header" as invalid argument for flag `--fixed-position` for example.
+
+## List of supported flags by `design to code`
+
+### Special
+
+- `//@ignore` - Ignore the flagged node from all process
+
+### Artwork / Graphics
+
+- `--artwork` / `--graphics` - specify that node is a artwork (graphics) and shall not be converted to a code, but a graphic element as png by default.
+- `--export`
+  - `--export-png`
+  - `--export-svg`
+- `--video`
+
+### Named Components
+
+- `--is-<component>` - tell the detector engine that this is a kind of a `<component>`
+- `--as-<component>` - force make this node as a component of specified, with the risk of fallback & invalud code.
+- `--is-button`
+- `--is-chip`
+- `--is-tabbar`
+- `--is-appbar`
+
+### Ignore property
+
+- `--ignore-<property-name>` / `--ignore=[property-accessor]`
+- `--ignore-item-spacing`
+
+### Dynamic content / container
+
+- `--dynamic-container`
+- `--dynamic-item`
+
+### Animation
+
+- `--animated`
+- `--animated-<property>`
+
+---
+
+- `--animated-rotation`
+
+### Position
+
+- `--position-fixed`
+- `--position-fixed-override=bottom`
+
+### Dimension
+
+The dimension flags are for specifing the extra context of the layout, which are not supported by the design tools.
+
+- `--max-width`
+- `--min-width`
+- `--max-height`
+- `--min-height`
+
+## Breakpoints
+
+- `@media`
+
+### Embedding
+
+- `--as-media`
+- `--image-src` - `--image-src=https://example.com/example.png`
+- `--video-src` - `--video-src=https://youtube.com/watch?v=xQGEOsCzFJU`
+- `--webview-src` - `--webview-src=https://youtube.com/watch?v=xQGEOsCzFJU` (also knwon as iframe)
+
+### Nested Scenario - on component-instance use
+
+<!-- WIP -->
+
+```
+(WIP)
+Master - master-component --artwork
+Instance - master-component --dynamic-container
+```
+
+### Custom flags
+
+1. you can add your custom flag by using `---arg` instead of `--arg`
+2. you can add your custom flag by using namespace `--com.domain.pkg/key=value`
+
+- `---custom-flag-name=value`
+
+### Tesging
+
+for testing, you can temporarily disable flag input by changing `--flag` to `----flag`. by this our parser will understand that the `flag` is givven, but temporarily disabled. other than `----` might cause error since changing
+
+1. from `--first-flag=a --second-flag=b`
+2. to `--first-flag=a second-flag=b` (Don't)
+   will cuase a parsing error & `first-flag`'s value will be interpreted as `"a second-flag=b"`
+
+**Best practice**
+
+1. from `--first-flag=a --second-flag=b`
+2. to `--first-flag=a ----second-flag=b` (Do)
+3. will cuase a parsing error & `first-flag`'s value will be interpreted as `"a"` as intended.
diff --git a/packages/support-flags/scripts/sanitize-readme.js b/packages/support-flags/scripts/sanitize-readme.js
new file mode 100644
index 00000000..bbe0a6ff
--- /dev/null
+++ b/packages/support-flags/scripts/sanitize-readme.js
@@ -0,0 +1,66 @@
+///
+/// this script does not create a new readme, it only replaces the existing one's content.
+///
+
+const fs = require("fs");
+const path = require("path");
+
+const _this_pkg_root = path.join(__dirname, "..");
+
+function get_flags_readme_files() {
+  const files = [];
+  // read all directories under origin directory with pattern that matches regex `/^--[a-z]+(.*?)$/` as prefix
+  // add README.md files to files array
+  fs.readdirSync(_this_pkg_root).forEach((dir) => {
+    if (dir.match(/^--[a-z]+(.*?)$/)) {
+      const dirPath = path.join(_this_pkg_root, dir);
+      const filesInDir = fs.readdirSync(dirPath);
+      filesInDir.forEach((file) => {
+        if (file === "README.md") {
+          files.push(path.join(dirPath, file));
+        }
+      });
+    }
+  });
+
+  // these are custom directories under origin. [`----disable`, `---custom`]
+  // add README.md under these directory, add to files array
+  ["----disable", "---custom"].forEach((dir) => {
+    const dirPath = path.join(_this_pkg_root, dir);
+    const filesInDir = fs.readdirSync(dirPath);
+    filesInDir.forEach((file) => {
+      if (file === "README.md") {
+        files.push(path.join(dirPath, file));
+      }
+    });
+  });
+
+  return files;
+}
+
+function generate_readme_all() {
+  const files = get_flags_readme_files();
+  const fileMap = new Map();
+  files.forEach((file) => {
+    // make a key. the key is extracted from var - file, which is a paht. extract last directory name and use it as key. e.g. "../../--action/README.md" -> "--action"
+    const key = path.basename(path.dirname(file));
+    const template = fs.readFileSync(
+      path.join(__dirname, "../docs/__readme_template__.md"),
+      "utf8"
+    );
+    fileMap.set(key, {
+      content: template.replace(/{{flag}}/g, key),
+    });
+  });
+
+  // update each readme.md
+  fileMap.forEach((value, key) => {
+    // const newFile = path.join(target, `${key}${value.ext}`);
+    fs.writeFileSync(
+      path.join(_this_pkg_root, key, "README.md"),
+      value.content
+    );
+  });
+}
+
+generate_readme_all();
diff --git a/scripts/docs-copy/flags-api-docs.js b/scripts/docs-copy/flags-api-docs.js
index a8c61ae8..96879807 100644
--- a/scripts/docs-copy/flags-api-docs.js
+++ b/scripts/docs-copy/flags-api-docs.js
@@ -1,64 +1,51 @@
 const fs = require("fs");
 const path = require("path");
 
-const origin = path.join(__dirname, "../../packages/support-flags");
+const origin = path.join(__dirname, "../../packages/support-flags/docs");
 const target = path.join(__dirname, "../../docs/flags");
-const github_base_url =
-  "https://github.com/gridaco/designto-code/tree/main/packages/support-flags";
+
 /**
- * copies the README.md file under each directory under "origin" to "target"
- * the README.md content will be preserved, but the file name will be changed to current folder name
- * for example, if the file is `--action/README.md`, the file will be copied and renamed to `--action.md`
- *
- * the origin directory will have multiple subdirectory with one README.md file.
- * these files under each subdirectory will be copied directly under "target" with above new file name.
+ * from https://stackoverflow.com/a/26038979/5463235
  */
-function copy() {
-  const files = [];
+function copyFileSync(source, target) {
+  var targetFile = target;
 
-  // read all directories under origin directory with pattern that matches regex `/^--[a-z]+(.*?)$/` as prefix
-  // add README.md files to files array
-  fs.readdirSync(origin).forEach((dir) => {
-    if (dir.match(/^--[a-z]+(.*?)$/)) {
-      const dirPath = path.join(origin, dir);
-      const filesInDir = fs.readdirSync(dirPath);
-      filesInDir.forEach((file) => {
-        if (file === "README.md") {
-          files.push(path.join(dirPath, file));
-        }
-      });
+  // If target is a directory, a new file with the same name will be created
+  if (fs.existsSync(target)) {
+    if (fs.lstatSync(target).isDirectory()) {
+      targetFile = path.join(target, path.basename(source));
     }
-  });
+  }
 
-  // these are custom directories under origin. [`----disable`, `---custom`]
-  // add README.md under these directory, add to files array
-  ["----disable", "---custom"].forEach((dir) => {
-    const dirPath = path.join(origin, dir);
-    const filesInDir = fs.readdirSync(dirPath);
-    filesInDir.forEach((file) => {
-      if (file === "README.md") {
-        files.push(path.join(dirPath, file));
-      }
-    });
-  });
+  fs.writeFileSync(targetFile, fs.readFileSync(source));
+}
 
-  // read the content and extension of each file, save it to a map. where key being the file path, value being the content and extension
-  const fileMap = new Map();
-  files.forEach((file) => {
-    const content = fs.readFileSync(file, "utf8");
-    const ext = path.extname(file);
-    // make a key. the key is extracted from var - file, which is a paht. extract last directory name and use it as key. e.g. "../../--action/README.md" -> "--action"
-    const key = path.basename(path.dirname(file));
-    fileMap.set(key, { content, ext });
-  });
+/**
+ * from https://stackoverflow.com/a/26038979/5463235
+ */
+function copyFolderRecursiveSync(source, target, custom_name) {
+  var files = [];
+
+  // Check if folder needs to be created or integrated
+  var targetFolder = path.join(target, custom_name);
+  if (!fs.existsSync(targetFolder)) {
+    throw `target folder does not exist - ${targetFolder}`;
+  }
 
-  // copy each file to target directory
-  fileMap.forEach((value, key) => {
-    const newFile = path.join(target, `${key}${value.ext}`);
-    fs.writeFileSync(newFile, value.content);
-  });
+  // Copy
+  if (fs.lstatSync(source).isDirectory()) {
+    files = fs.readdirSync(source);
+    files.forEach(function (file) {
+      var curSource = path.join(source, file);
+      if (fs.lstatSync(curSource).isDirectory()) {
+        copyFolderRecursiveSync(curSource, targetFolder);
+      } else {
+        copyFileSync(curSource, targetFolder);
+      }
+    });
+  }
 }
 
 if (require.main === module) {
-  copy();
+  copyFolderRecursiveSync(origin, target, ".");
 }

From cf7ea7bcb2e7b697f02de800d0c929d637fe2aae Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Tue, 4 Jan 2022 05:08:49 +0900
Subject: [PATCH 2/2] update readme for github

---
 packages/support-flags/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/support-flags/README.md b/packages/support-flags/README.md
index 2dd5b8b5..19262392 100644
--- a/packages/support-flags/README.md
+++ b/packages/support-flags/README.md
@@ -1,3 +1,3 @@
 # Flags support
 
-Learn more about design flags from [docs/flags](../../docs/flags.md)
+Learn more about design flags from [docs/flags](./docs/index.md)
