Add a better looking frame for mobile and web previews

説明

コントリビューターガイド

技術スタック

typescriptcsstailwindcssreact

領域

frontend

Issue 種別

feature

難度新しい貢献者にとっての実装難度です。1 は非常に小さな変更、5 は専門的な作業です。

2

推定時間経験ある貢献者が調査、実装、テスト、pull request 準備にかけるおおよその時間範囲です。

1-3 hours

活動状況Issue が今どれだけ取り組みやすいかを示します。新しい、活発、古い、ブロック中、またはメンテナー入力待ちなどです。

fresh

明確さ期待される変更、受け入れ条件、次の手順がどれだけ明確かを示します。

mostly clear

前提条件

CSS layouttailwindcss styling

初心者向け度初回貢献者にどれだけ取り組みやすいかを 1-100 で推定したスコアです。

75

調査方針

Locate the preview component in the codebase (e.g., src/components/Preview.tsx or similar). Review how mobile and web previews are currently rendered. The images in the issue show a device frame with rounded corners and a subtle shadow; implement a similar frame using TailwindCSS classes. Ensure the frame adapts to different screen sizes and maintains the preview aspect ratio.